css - 具有可变高度的表格单元格内的绝对定位元素

Question

stackexchange 上有很多关于 TD 内绝对定位的问题，但我没有找到针对我的具体问题的解决方案:

我需要实现以下布局

此单元格是表格中表格数据表示的一部分。

单元格的内容是文本数据。

文本可以是多行的，并且必须垂直和水平居中对齐。 单元格的高度可能会有所不同，因为表格行高可能会被其他单元格的内容拉伸(stretch)，但单元格文本应始终保持垂直对齐(目前通过 vertical-align: middle 实现) )

绝对定位元素应该始终位于单元格的右上角。

我知道将相对 div 放置在 TD 中然后将绝对定位元素放置在 div 中的技术，但由于可变单元格高度和垂直对齐单元格文本的要求，这似乎不是一种选择。

解决方案需要兼容IE8+、Chrome 21+和FF 15+

Answer 1

在关闭按钮周围插入一个 div:

<table>
    <tr>
       <td>
          <div class="wrapper">
              <div class="close">X</div>
          </div>
          My vertically aligned text.
       </td>
    </tr>
</table>

然后放置您的关闭按钮:

table td div.wrapper {
    position: relative;
}

table td div.close {
    position: absolute;
    right: 0;
    top: 0;
}