表单元格(td）相对于表行(tr）的绝对位置

Absolute position table cell (td) relative to table row (tr)

本文关键字：位置 tr 单元格 td 相对于 表单      更新时间：2023-09-26

是否可以将表单元格（td）相对于包含该td的表行（tr）进行绝对定位。

例如，考虑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中工作。铬td相对于桌子定位，而非tr.

请查看jsfiddlehttp://jsfiddle.net/n5s53v32/2/。

对于表，浏览器是非常严格的。当您超出了表的工作设计范围时，它就不能很好地工作。

然而，您可以使用固定定位的技巧来欺骗浏览器，使其不考虑错误放置的表单元格，因为它完全偏离了正常流程：

  • 将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>

您不能将单元格从表中移开（据我所知）。

相关文章：