Html CSS表行重新排序

是否可以仅使用CSS对表行重新排序

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

---

您可以尝试使用不同的

显示值对其重新排序。注意，它可能会影响整个表的行为



2.
3.
1.
您可以在css中创建一个类，并按如下顺序应用转换

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

}

有点棘手，但它适用于所有浏览器，您不必为每个tr标记设置样式，并且适用于无限数量的tr标记：

td {
  position: relative;
  top: 20px;
  height: 20px;
}

tr:last-child td {
  position: absolute;
  top: 0px;
}

table {
  position: relative
}


（我们不能将“position:relative”应用于tr，这就是我应用于td的原因，请参见）
您可以使用变换移动行。但是如果你想移动不止一个，调整起来就很困难


tr{
背景颜色：浅蓝色；
转换：translateY（22px）；
}
tr：最后一个孩子{
transform:translateY（-44px）；
}

两个
三
一个
在实际情况下，我有3个以上的tr。请参阅，这会再次更改表格行为。@Sevi如果您更改tr显示值，它将正常工作。