CSS table rows reorder

Question

Is it possible to reorder table rows only with CSS?

<table>
    <tr></tr> <!-- order 2-->
    <tr></tr> <!-- order 3-->
    <tr></tr> <!-- order 1-->
</table>

Answer 1

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>

Answer 2

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 )

Answer 3

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>

Answer 4

You can make a class in css and apply transformation by degrees like below

.reverseOrder{
-webkit-transform: rotate(180deg)
-moz-transofrm: rotate(180deg)

}