Is there anyway to reorder of row <tr> in table by css?

Question

I have a table with 3 row like below. How can I change the order of row by CSS? Example:

1. Name: A B C
2. Age: 1 2 3
3. Country: US CA CN

And I want it become:

1. Country: US CA CN
2. Name: A B C
3. AGE: 1 2 3

    table, th, td {
      border: 1px solid black;
    }
    .value {
      text-align: right;
    }
    td {
      padding: 2px 10px;
    }

    <table class="details">
      <tbody>
        <tr class="name">
          <td class="label"><label for="name">Fullname</label></td>
          <td class="value name-wrapper">Ann Smith</td>
          <td class="value name-wrapper">Beck Jackson</td>
          <td class="value name-wrapper">Chang Winchester</td>        
        </tr>
        <tr class="Age">
          <td class="label"><label for="age">Age</label></td>
          <td class="value age-wrapper">26</td>
          <td class="value age-wrapper">19</td>
          <td class="value age-wrapper">54</td>
        </tr>    
        <tr class="Country">
          <td class="label"><label for="country">Country</label></td>
          <td class="value country-wrapper">CA</td>
          <td class="value country-wrapper">US</td>
          <td class="value country-wrapper">UK</td>
        </tr>
      </tbody>
    </table>

Lepage

Why do you want to do this with CSS? And if it's necessary, I should use flexbox and divs (as other users have pointed out), instead of a table. – Sporulate

@Sporulate flexbox is not designed to create a table layout – Golgotha

of course is not @TemaniAfif. But only with CSS I don't think it is possible to change the order fo the <tr>. So I would reformulate: In my opinion, you could create a layout, that simulates a table, with divs and flexbox (or better, with display: grid). Or use javascript, to switch the order of your table rows. – Sporulate

Because I can not change the the foreach code :( I think CSS will be easier... – Lepage

could you use javascript, @SeCrEtBoY? – Sporulate

I don't good at js :( The foreach in php is list automatic, I can use reverse_arrays but Just reverse the order but I can not make custom order... Use JS will not use much resource? – Lepage

Answer 1

You can use flex-direction: column-reverse on parent elements to reverse the order of their children. Use flex-direction: row-reverse for rows.

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>

Gainor

It seems to works with the code you provided, but @TemaniAfif has a good point about multiple columns. – Gainor

Answer 2

I think the only way to do this is to consider some visual hack by using transform. Make sure border-spacing is set to 0 to avoid complex calculation and be aware that this work fine if all the tr have the same height.

tr {
  /*we move all the tr down by one row*/
  transform:translateY(100%);
}

tr.country { 
  /*we move the country tr up by two rows*/
  transform:translateY(-200%);
}

table {
 border-spacing:0;
}
td {
 padding:5px;
}

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

Golgotha

Answer 3

You can do this with flex and order and position them however you want. Disclaimer, with this solution tr won't have display: table-row-group so you'll have to write additional css for positioning your cells:

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

tr:nth-child(2) {
  order: -1;
}

tr:nth-child(1) {
  order: 1;
}

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

Updated added updated HTML.

Beside

check the fiddle I sent, we no more have a table layout when applying your code – Golgotha

Ah, yes this affects the css. – Beside