Reputation:
Is it possible to reorder table rows only with CSS?
<table>
<tr></tr> <!-- order 2-->
<tr></tr> <!-- order 3-->
<tr></tr> <!-- order 1-->
</table>
Upvotes: 7
Views: 19327
Reputation: 672
A bit tricky, but it works under all browsers, you don't have to style each tr tag, and works for unbounded number of tr tags :
td {
position: relative;
top: 20px;
height: 20px;
}
tr:last-child td {
position: absolute;
top: 0px;
}
table {
position: relative
}
https://jsfiddle.net/n526e0fy/
(we can not apply "position: relative" to tr, that's why I've applied on td, see HTML <tr> tag and position:relative )
Upvotes: 0
Reputation: 64264
You can move the rows with transforms. But if you want to move more than one, it can be difficult to adjust
tr {
background-color: lightblue;
transform: translateY(22px);
}
tr:last-child {
transform: translateY(-44px);
}
<table>
<tr><td>TWO</td></tr> <!-- order 2-->
<tr><td>THREE</td></tr> <!-- order 3-->
<tr><td>ONE</td></tr> <!-- order 1-->
</table>
Upvotes: -1
Reputation: 13
You can make a class in css and apply transformation by degrees like below
.reverseOrder{
-webkit-transform: rotate(180deg)
-moz-transofrm: rotate(180deg)
}
Upvotes: -6
Reputation: 78796
You can try reordering them with different display
values. Note, it may affect your overall table behaviors.
<table>
<tr style="display:table-row-group;"><td>2</td></tr> <!-- order 2-->
<tr style="display:table-footer-group;"><td>3</td></tr> <!-- order 3-->
<tr style="display:table-header-group;"><td>1</td></tr> <!-- order 1-->
</table>
Upvotes: 7