javascript - Absolute position table cell (td) relative to table row (tr) -
is possible absolute position table cell (td) relative table row (tr) containing td.
for example consider html 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 below:
tr{position:relative} td.last{ position:absolute; left: 10px; top: 40px}
in above example, can take out last td tr , absolute position relative tr.
edit: working in firefox version 33.0, not working in chrome version 38. in chrome td positioned respect table , not tr.
please check jsfiddle @ http://jsfiddle.net/n5s53v32/2/ .
the browsers strict when comes tables. not work when out of scope of how tables designed work.
however, can use trick fixed positioning cheat browser not taking in account missplaced table cell, since absolutelly off normal flow:
add
transform
property table row, act fixed position container. choose 1 not have visual impact,transform: scale(1,1);
set table cell
position: fixed
, , can move relatively 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>
Comments
Post a Comment