8. Tables

The problem with tables is that they tend to take up a lot of horizontal space, and we can't break them up as the browser width shrinks. That's why the technique is to wrap it in a container with overflow-x: auto. This way we'll have a scroll that will help view it in full without breaking the layout.

.container-table {
  overflow-x: auto;
}

<div class="container-table">
  <table>
    ...
  </table>
</div>

Reduce its width until the horizontal scroll appears. You'll notice that the scroll isn't shown on the table, but on the section that contains it.

Now we can have tables that can be viewed on mobile devices without breaking the layout.

In case it is a very long table, we can use position: sticky to lock the headers.

thead {
position: sticky;
top: 0;
}

Scroll in the following example.

These aren't the only ways to improve the user experience with tables, but they are the cheap ones. I also recommend that you weigh the possibility of creating charts instead of the table, since they are easier to read and understand.