在 TD 中使用相对/绝对位置？答案

【问题标题】：Using Position Relative/Absolute within a TD?在 TD 中使用相对/绝对位置？
【发布时间】：2011-06-01 16:01:02
【问题描述】：

我有以下代码：

<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>

这根本不起作用。出于某种原因，没有在 TD 上读取 position:relative 命令，并且通知 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 下方，而不是底部。

【问题讨论】：

有使用表的理由吗？我假设其余的表格内容将改变这个单元格的内容。如果需要表格，您可以使用两行顶部与 valign=top 和底部与 valign=bottom
如果您使用表格进行布局，我建议您不要这样做。使用表格显示数据很好，但它们不适合布局。
它用于日历...所以表格网格是必不可少的：8wayrun.com/events/monthly/1.2011

标签： html position html-table

【解决方案1】：

这是因为根据CSS 2.1，position: relative 对表格元素的影响是未定义的。说明这一点，position: relative 在 Chrome 13 上具有预期效果，但在 Firefox 4 上没有。您的解决方案是在您的内容周围添加 div 并将 position: relative 放在 div 上而不是 @987654329 @。下面说明了使用position: relative (1) 在div 上得到的结果，(2) 在td(不好) 上，最后是 (3) 在div 上的@987654334 内@（再次好）。

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

【讨论】：

div 的高度不会是 100% ，所以相对定位到底部：0 无效。
请注意，本例中的“绝对跨度”不会影响td高度，基本上无法使用table。
@Softlion：如何将td 的全部内容包装在div 中，设置为width: 100% 和height: 100%，应用从td 到div 的任何填充，然后设置发给relative？这个想法是在td 上方创建一个薄的包含层，其作用类似于td 本身，但它是div。它对我有用。
HTML 源的链接已失效。你能更新/刷新它吗？
对于那些在 2019 年或以后找到这个答案的人：虽然 CSS2.1 确实说过 position:relative 对内部表格部分的影响是未定义的，但这意味着 表格部分本身的行为 （例如，在border-collapse:collapse 的情况下，如果通过position:relative 移动td 的边界应该如何表现尚不清楚）。它并没有将它们排除在绝对定位的后代的可能containing blocks 之外。所以 Firefox 的行为原来只是一个 bug，在 2014 年被修复。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

表格单元格内容，可变高度，可大于60px；

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

【讨论】：

【解决方案4】：

关于您的第二次尝试，您是否尝试过使用垂直对齐？要么

<td valign="bottom">

或者用css

vertical-align:bottom

【讨论】：

那行不通...如果我这样做了，那么表格单元格的内容将从底部间隔 60px；而不是在顶部。

【解决方案5】：

如果您执行“display: block;”也可以使用在 td 上，破坏 td 身份，但有效！

【讨论】：