相对于表行（tr）的绝对位置表单元格（td） [英] Absolute position table cell (td) relative to table row (tr)

问题描述

相对于包含td的表行（tr），绝对位置表单元格（td）是可能的。

Is it possible to absolute position table cell (td) relative to table row (tr) containing that td.

例如，考虑html如下：

For example consider html as below:

<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 to tr。

In above example, can I take out last td from tr and absolute position it relative to tr.

编辑：它在Firefox版本33.0中工作，但不能在Chrome版本38中工作。而不是tr。

Its working in Firefox Version 33.0, but not working in Chrome Version 38. In chrome td positioned with respect to table and not with tr.

请在 http请检查jsfiddle ：//jsfiddle.net/n5s53v32/2/ 。

推荐答案

表。当你超出表格设计工作的范围时，它不能很好地工作。

The browsers are very strict when it comes to tables. It does not work well when you get out of the scope of how tables are designed to work.

但是，你可以使用固定定位的技巧欺骗浏览器不考虑错位的表格单元格，因为它是正常流程之下的：

However, you can use a trick with fixed positioning to cheat the browser into not taking in account the missplaced table cell, since it is absolutelly off the normal flow:

• 添加 transform 属性到表行，因此它将作为固定位置容器。选择一个不会产生任何视觉效果的对象，例如 transform：scale（1,1）;

• Add a transform property to the table row, so it will act as a fixed position container. Choose one that will not have any visual impact, like transform: scale(1,1);

将表格单元格设置为 position：fixed ，然后您可以相对于已转换的行移动它：

Set the table cell as position: fixed, and then you can move it relatively to the transformed row:

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>

这篇关于相对于表行（tr）的绝对位置表单元格（td）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！