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

【问题标题】：Absolute positioned element inside of table cell with variable height具有可变高度的表格单元格内的绝对定位元素
【发布时间】：2012-12-23 12:31:06
【问题描述】：

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

我需要实现以下布局

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

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

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

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

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

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

【问题讨论】：

你不能在 td.你必须在td里面放一个div然后做de定位

标签： css html-table css-position

【解决方案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;
}

【讨论】：