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

Question

是否可以相对于包含该 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 相对于 table 而不是 tr。

请查看 http://jsfiddle.net/n5s53v32/2/ 的 jsfiddle。

Answer 1

浏览器对表格非常严格。当您超出表格的设计工作范围时，它就无法正常工作。

但是，您可以使用固定定位的技巧来欺骗浏览器，使其不考虑放错位置的表格单元格，因为它完全不符合正常流程：

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

Answer 2

您不能将单元格从桌子上移开（据我所知）。