Question

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

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

Answer 1

您可以尝试使用不同的display值重新排序它们。请注意，它可能会影响您的整体表行为。

＆＃13;

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

＆＃13;

Answer 2

您可以在css中创建一个类，并按照下面的程度应用转换

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

}

Answer 3

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

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

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

table {
  position: relative
}

https://jsfiddle.net/n526e0fy/

（我们不能将“position：relative”应用于tr，这就是我在td上应用的原因，请参阅HTML <tr> tag and position:relative）

Answer 4

您可以使用变换移动行。但是如果你想移动多个，那就很难调整

＆＃13;

tr {
  background-color: lightblue;
  transform: translateY(22px);
}

tr:last-child {
  transform: translateY(-44px);
  
}

＆＃13;

<table>
    <tr><td>TWO</td></tr> <!-- order 2-->
    <tr><td>THREE</td></tr> <!-- order 3-->
    <tr><td>ONE</td></tr> <!-- order 1-->
</table>

＆＃13;

CSS表行重新排序

4 个答案: