css - 无论如何，是否有通过 css 对表中的行 重新排序？

Question

我有一个 3 行的表格，如下所示。如何通过 CSS 更改行的顺序？示例:

1. 姓名:A B C
2. 年龄:1 2 3
3. 国家:美国 CA CN

我希望它变成:

1. 国家:美国 CA CN
2. 姓名:A B C
3. 年龄:1 2 3

<table class="details">
  <tbody>
    <tr class="name">
        <td class="label"><label for="name">Fullname</label></td>
        <td class="value name-wrapper">name</td>
    </tr>
    <tr class="Age">
        <td class="label"><label for="age">Age</label></td>
        <td class="value age-wrapper">26</td></tr>
        
    <tr class="Country">
        <td class="label"><label for="country">Country</label></td>
        <td class="value country-wrapper">US</td></tr>
  </tbody>
</table>

Answer 1

您可以在父元素上使用 flex-direction: column-reverse 来反转其子元素的顺序。对行使用 flex-direction: row-reverse。

tbody { display: flex; flex-direction: column-reverse; }

<table class="details">
  <tbody>
    <tr class="name">
        <td class="label"><label for="name">Fullname</label></td>
        <td class="value name-wrapper"></td>
    </tr>
    <tr class="Age">
        <td class="label"><label for="age">Age</label></td>
        <td class="value age-wrapper"></td>
    </tr>
    <tr class="Country">
        <td class="label"><label for="country">Country</label></td>
        <td class="value country-wrapper"></td>
    </tr>
  </tbody>
</table>