CSS 表格行重新排序答案

【问题标题】：CSS table rows reorderCSS 表格行重新排序
【发布时间】：2016-02-23 07:30:19
【问题描述】：

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

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

【问题讨论】：

标签： html css html-table

【解决方案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>

【讨论】：

实际上我有超过 3 tr.
查看flexbox approach，这再次改变了表格行为。
@Sevi 如果您更改 tr 显示值 demo 它可以工作。

【解决方案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/

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

您可以在 css 中创建一个类并按如下方式应用转换

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

}

【讨论】：