Responsive vertical html table

user_15067728 0
Viewed 483

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

grid-layout flexbox css html
2 Answers
  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>

Alohci_425850

What you're looking for is media queries. Using media queries you can style your page using CSS based on the page max/min width.

Take a look at this for further info.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Here is an example when a screen has a max-width of 900px and when that is applied the following CSS will be applied. Anything outside of that range will have the above CSS applied

.example {
  font-size: 7rem;
  width: 75%;
}

@media screen and (max-width: 900px){

.example {
  font-size: 3.5rem;
  width: 50%;
}

}
user_142958960
Related