CSS表格行重新排序

Question

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

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

- Sevi

Answer 1

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

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

- Stickers

---

在实际情况中，我有超过3万亿。 - Sevi

请查看flexbox方法，这将再次改变表格的行为。 - Stickers

@Sevi 如果你改变 tr 的 display 值 演示，它就可以工作了。 - Stickers

Answer 2

有点棘手，但它在所有浏览器下都能正常工作，您不必为每个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> 标签和 position:relative。

- Sebastien

Answer 3

你可以通过转换来移动行。但是如果你想要移动多个，调整起来可能会比较困难。

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>

- vals

Answer 4

你可以在CSS中创建一个类，并通过度数应用变换，如下所示：

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

}

- Naqash Ahmed