Responsive vertical HTML table

Question

If I have a vertically defined table, with a title, like so:

https://codepen.io/Slagon/pen/YzGbgza

    <table>
<thead>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
    <th>Heading 4</th>
    <th>Heading 5</th>
    <th>Heading 6</th>
    <th>Heading 7</th>
    <th>Heading 8</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
</tbody>
</table>

Where the reading direction is left to right, reading down each column. How would I go about making it mobile responsive?

I imagine one column each, stacked on top of each other. Like so:

https://codepen.io/Slagon/pen/bGwyZdJ

Answer 1

1. Remove the table styling
2. Set the formatting context to flexbox
3. Reorder the table cells with the order property

table * {
  display: contents;
}
table {
  display: flex;
  flex-direction:column;
}
th, td {
  display:block;
  text-align:center;
}
tr > *:nth-child(1) { order:1;}
tr > *:nth-child(2) { order:2;}
tr > *:nth-child(3) { order:3;}
tr > *:nth-child(4) { order:4;}
tr > *:nth-child(5) { order:5;}
tr > *:nth-child(6) { order:6;}
tr > *:nth-child(7) { order:7;}
tr > *:nth-child(8) { order:8;}

<table>
<thead>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
    <th>Heading 4</th>
    <th>Heading 5</th>
    <th>Heading 6</th>
    <th>Heading 7</th>
    <th>Heading 8</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
  <tr>
    <td>Content for Heading 1</td>
    <td>Content for Heading 2</td>
    <td>Content for Heading 3</td>
    <td>Content for Heading 4</td>
    <td>Content for Heading 5</td>
    <td>Content for Heading 6</td>
    <td>Content for Heading 7</td>
    <td>Content for Heading 8</td>
  </tr>
</tbody>
</table>