相对于表格行（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版中使用。

请通过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

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