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

Question

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

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>

and css as below:

tr{position:relative}

td.last{ position:absolute; left: 10px; top: 40px}

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

Edit: 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.

Please check the jsfiddle at http://jsfiddle.net/n5s53v32/2/ .

Answer 1

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:

• 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);

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