10

我有一个表格单元格，我希望其中的 div 始终位于左下角。以下在 IE 和 Safari 中运行良好，但 Firefox 将div绝对定位在页面上，而不是在单元格内（基于解决方案解决方案的代码here）。我已经测试了使用和不使用 DTD，它将 Firefox 置于 Quirks 模式和标准模式，但都不能正常工作。我被困住了——有什么想法吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
        table { width:500px; }
        th, td { vertical-align: top; border:1px solid black; position:relative; }
        th { width:100px; }
        .manage { text-align:right; position:absolute; bottom:0; right:0; }
        </style>
    </head>
    <body >
    <table>
        <tr>
            <th>Some info about the following thing and this is actually going to span a few lines</th>
            <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
        </tr>
        <tr>
            <th>Some info about the following thing and this is actually going to span a few lines</th>
            <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
        </tr>
    </table>
    </body>
</html>
4

7 回答 7

7

根据W3C， position:relative 对表格单元格没有影响：

"'position:relative' 对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell 和 table-caption 的影响元素未定义。”

解决方案是向表格单元格添加一个额外的包装 div。

编辑：这个 div 需要一个height:100%andposition:relative;来设置。

<table>
    <tr>
        <td>
            <div style="position:relative;height:100%;">
                Normal inline content.
                <div class="manage">your absolute-positioned content</div>
            </div>
        </td>
    </tr>
</table>
于 2008-11-14T15:20:48.420 回答
1

把 adisplay:block放在桌子上，现在 FF 尊重位置：相对。

于 2010-07-20T15:20:08.623 回答
1

看看这是否适合你。不确定问题的确切性质，但它与使用 td 和相对定位有关。我用 div 标签包装了表格并将其相对定位，它似乎可以满足您的需求。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
        table { width:500px;  }
        th, td { vertical-align: top; border:1px solid black; }
        th { width:100px; }
        div.body {position:relative; width:500px;}
        .manage { text-align:right; position:absolute; bottom:0; right:0; display:block}
        </style>
    </head>
    <body >
    <div class="body"><table>
        <tr>
                <th>Some info about the following thing and this is actually going to span a few lines</th>
                <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
        </tr>
    </table></div>
    </body>
</html>
于 2008-11-14T15:15:31.520 回答
0

在 TD 内有一个宽度为 100% 和高度为 100% 的 DIV，然后将其设置为位置：相对。

于 2008-11-14T15:36:21.633 回答
0

对了， position:relative 对表格元素没有影响，firefox 应用了这个规则。div 的解决方案有效，但在我看来这是一个糟糕的标记。

您绝对需要使用表格来显示此内容吗？（或者是相对的？）

如果没有，你为什么不使用 div 元素并做你想做的事？

使用表格来解决布局问题是 1998 年...

于 2008-11-14T15:36:57.623 回答
0

position: relativetd该标签显然不受全球支持。不幸的是，我找不到确切的消息来源。

您可能希望将一个div块放入td具有所需大小的块中，然后应用position: relative到该块中。

于 2008-11-14T15:17:41.640 回答
0

这听起来很明显，但是您是否尝试过vertical-align: bottom;在 .manage 中使用？

于 2008-11-14T15:18:15.553 回答