html - 我可以绝对地将元素定位在 <td> 元素的右上角吗？

Question

我有一个表格，我需要在每个单元格的右上角放置一个元素。

我读过其他几个问同样问题的问题，但似乎都没有解决问题。

我读过的一个解决方案是将单元格的内部包裹在具有相对定位的 div 中，但这不起作用，因为 div 不会填充整个单元格，即使将高度和宽度设置为 100%。

我读过的另一个解决方案是手动设置单元格的高度并手动将 div 的高度设置为相同的值。这对我也不起作用，因为表格是动态生成的，我不能保证单元格的大小。

下面是一些说明问题的代码:

<table border="1">
<tr>
    <td>
        <div style="position:relative; height: 100%; background: yellow;">
            <p>This is some content</p>
            <div style="position:absolute; right:0px; top:0px; background: red;">
               absolute
            </div>
        </div>
    </td>
    <td>
        <div style="position:relative;  height: 100%;  background: yellow;">
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <div style="position:absolute;right:0px; top:0px; background: red;">
               absolute
            </div>
        </div>
    </td>
</tr>   

这是这个例子的样子http://jsfiddle.net/hqtEQ/

有什么方法可以让红色 div 进入每个单元格的右上角吗？

Answer 1

td 的默认垂直对齐是居中的；所以，如果您不担心单元格中的其他内容，只需替换

<td>

与

<td style="vertical-align: top;">

(或为此效果添加 CSS 类)，您的布局将按预期工作。

参见 http://jsfiddle.net/hqtEQ/1/