4

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

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

我读过的一种解决方案是将单元格的内部包装在具有相对定位的 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 进入每个单元格的右上角？

4

2 回答 2

3

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

<td>

和

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

（或为此效果添加一个 CSS 类），您的布局将按预期工作。

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

于 2013-07-18T22:51:18.450 回答
1

Firefox 似乎是唯一不能绝对将某些东西直接放在tdwith中的浏览器position:relative（因为错误 63895）。其他浏览器在这里没有任何问题。从版本 22 开始，Firefox 支持最新的 Flexbox 语法，a) 可以模拟表格行为，b) 没有问题position: relative。仅将其用作 Firefox 的解决方法怎么样？

td {
    position: relative;
    background: yellow;
}

:-moz-any-link > html, tr {
    display: flex;
    flex-direction: row;
}

:-moz-any-link > html, td {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

小提琴

于 2013-07-19T02:10:52.273 回答