CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Santosh S
Santosh S

Reputation: 4345

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

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

Upvotes: 2

Views: 10698

Answers (2)

LcSalazar
LcSalazar

Reputation: 16841

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>

Upvotes: 5

Bill Kindig
Bill Kindig

Reputation: 3652

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

Upvotes: 0

Related Questions