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

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/n5s53v32/2/ .

• javascript
• jquery
• html
• css

• 2 When you need to do things such as this it's an indicator that you absolutely should NOT be using a table. Tables are best left to tabular data. Tables just aren't suitable for layout choices. – scrappedcola Commented Nov 11, 2014 at 14:38
• 1 Did you attempt to try it? – Abhitalks Commented Nov 11, 2014 at 14:38
• Yes, you can (jsfiddle/n5s53v32) - But the question is, why??? – LcSalazar Commented Nov 11, 2014 at 14:41
• Regarding your edit: It very well works in Chrome. – Abhitalks Commented Nov 11, 2014 at 14:43
• @LcSalazar I know the purpose of table is different, but I am using Kendo UI grid, and I have requrement to place edit/delete buttons of each row of grid to center of the row, below other row cell. – Santosh S Commented Nov 11, 2014 at 14:44

2 Answers 2

The browsers are very strict when it es 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>

You can't move a cell away from the table (that I know of).