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中相对于表而不是tr。

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

Answer 1

对于表格，浏览器非常严格。当你超出表的工作范围时，它不能很好地工作。

但是，您可以使用固定定位的技巧来欺骗浏览器，而不考虑错位的表格单元格，因为它绝对偏离正常流程：

向表格行添加transform属性，因此它将充当固定位置容器。选择一个不会产生任何视觉效果的视频，例如transform: scale(1,1);
将表格单元格设置为position: fixed，然后您可以将其相对移动到已转换的行：

＆＃13;

tr {
  position:relative;
  transform:scale(1,1);
}

td.last{
  position:fixed;
  left: 10px;
  top: 40px;
}

＆＃13;

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

＆＃13;

Answer 2

你不能将一个细胞从桌子上移开（我知道）。

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

2 个答案: