在TD元素中使用相对定位/绝对定位？

Question

在TD元素中使用相对定位/绝对定位？

116

我有以下代码：

<td style="position: relative; min-height: 60px; vertical-align: top;">
    Contents of table cell, variable height, could be more than 60px;

    <div style="position: absolute; bottom: 0px;">
        Notice
    </div>
</td>

这根本不起作用。由于某种原因，`position: relative` 命令没有被 TD 读取，并且提示 DIV 被放置在内容容器外部，位于页面底部。我尝试将 TD 的所有内容都放到一个 DIV 中，例如：

<td>
    <div style="position: relative; min-height: 60px; vertical-align: top;">
        Contents of table cell, variable height, could be more than 60px;

        <div style="position: absolute; bottom: 0px;">
            Notice
        </div>
    </div>
</td>

然而，这样会产生一个新问题。由于表格单元格内容的高度是可变的，提示DIV并不总是在单元格底部。如果一个单元格超过了60px标记，但其他单元格没有超过，那么在其他单元格中，提示DIV将在60px下面，而不是在底部。

- Jason Axelrod

使用表格的原因是什么？我假设表格的其余内容将会移动此单元格的内容。如果必须使用表格，您可以使用两行，顶部行使用valign=top，底部行使用valign=bottom。 - Wayne

如果您正在使用表格进行布局，我会建议避免这样做。使用表格来展示数据是可以的，但对于布局来说，它们并不是最好的选择。 - Kyle

5

这是一个日历，因此表格网格是必不可少的： http://www.8wayrun.com/events/monthly/1.2011/ - Jason Axelrod

5个回答

6

这个技巧也适用，但在这种情况下，对齐属性（middle、bottom等）将不起作用。

<td style="display: block; position: relative;">
</td>

- Sergey Onishchenko

2

单元格内容，高度可变，可能超过60像素；

<div style="position: absolute; bottom: 0px;">
    Notice
</div>

- Xavier Deva Arul

0

关于你的第二次尝试，你尝试过使用垂直对齐吗？

<td valign="bottom">

或者使用CSS

vertical-align:bottom

- Kyle

那样做不行...如果我这样做，表格单元格的内容将与顶部相距60像素，而不是底部。 - Jason Axelrod

-2

如果在td上使用"display: block;"，破坏了td的身份，但仍然有效！

- daigorocub

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- avernet · Accepted Answer

这是因为根据CSS 2.1，position: relative对表格元素的影响是未定义的。例如，在Chrome 13上，position: relative具有期望的效果，但在Firefox 4上没有。您的解决方案是在内容周围添加一个div，并将position: relative放在该div上，而不是td上。以下说明了使用position: relative时获得的结果：(1)在div上(good)，(2)在td上(no good)，最后(3)在td内部的div上(good again)。

On Firefox 4

<table>
  <tr>
    <td>
      <div style="position:relative;">
        <span style="position:absolute; left:150px;">
          Absolute span
        </span>
        Relative div
      </div>
    </td>
  </tr>
</table>