是否可以相对于包含该 td 的表格行 (tr) 绝对定位表格单元格 (td)。
例如,考虑如下 html:
<table>
<tr>
<td>tr1 td 1</td>
<td>tr1 td 2</td>
<td class="last">tr1 td 3</td>
</tr>
<tr>
<td>tr2 td 1</td>
<td>tr2 td 2</td>
<td class="last">tr2 td 3</td>
</tr>
<tr>
<td>tr3 td 1</td>
<td>tr3 td 2</td>
<td class="last">tr3 td 3</td>
</tr>
</table>
和 css 如下:
tr{position:relative}
td.last{ position:absolute; left: 10px; top: 40px}
在上面的示例中,我可以从 tr 中取出最后一个 td 并将其相对于 tr 进行绝对定位吗?
编辑:它在 Firefox 版本 33.0 中工作,但在 Chrome 版本 38 中不工作。在 chrome 中,td 是根据表格而不是 tr 定位的。
请在 http://jsfiddle.net/n5s53v32/2/ 查看 jsfiddle .
最佳答案
浏览器对表格非常严格。当您超出表格的设计工作范围时,它就无法正常工作。
但是,您可以使用固定定位的技巧来欺骗浏览器,使其不考虑放错位置的表格单元格,因为它绝对不符合正常流程:
向表格行添加一个
transform
属性,使其充当固定位置容器。选择一个不会有任何视觉影响的,比如transform: scale(1,1);
将表格单元格设置为
position: fixed
,然后就可以相对移动到转换后的行了:
tr {
position:relative;
transform:scale(1,1);
}
td.last{
position:fixed;
left: 10px;
top: 40px;
}
<table>
<tr>
<td>td 1</td>
<td>td 2</td>
<td class="last">td 3</td>
</tr>
<tr>
<td>td 1</td>
<td>td 2</td>
<td class="last">td 3</td>
</tr>
<tr>
<td>td 1</td>
<td>td 2</td>
<td class="last">td 3</td>
</tr>
</table>
关于javascript - 相对于表格行 (tr) 的绝对位置表格单元格 (td),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26867321/