How to rearrange table td

July 4, 2022

I have this problem, is there a way to change the order of the td and th with "testing" class such that it will be the first column on mobile but moves to the last column on desktop? thanks.

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col" class="testing">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td class="testing">@mdo</td>
   </tr>
   <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td class="testing">@fat</td>
    </tr>
  </tbody>
 </table>

>Solution :

Here is an example using flex and the css order property. I used the hover property because it’s easier to test than resizing the snippet, but you could change the style from a hover to a media query and check the screen size.

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 0.2rem 0.6rem;
}

tr {
  display: flex;
}

td:nth-child(0) {
  order: 0;
}

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

td:nth-child(2) {
  order: 2;
}

td:nth-child(3) {
  order: 3;
}

td:nth-child(4) {
  order: 4;
}

td:nth-child(5) {
  order: 5;
}

.fl {
  background-color: lightgreen;
}

.lf {
  background-color: pink;
}

table:hover .fl {
  order: 5;
}

table:hover .lf {
  order: 0;
}

<table>
  <tr>
    <td class="fl">first no-hover, last hover</td>
    <td>second</td>
    <td>third</td>
    <td>fourth</td>
    <td class="lf">first hover, last no-hover</td>
  </tr>
</table>