Scrolling tables

Published on Friday, 17 February 2023.
At 370 words, this article should take about 2 minutes to read.

Way back in the mists of time, before display: grid; even before display: flex;, we "webmasters" had to use the <table></table> element for layout.

It wasn't neat and, at the time, liable to reduce one to tears 😆

Now we have much better ways to mark up designs but the table element is still useful!

If we need to display data, the table is exactly the correct element - yay, tables!

What would that actually look like, Thom?

<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>City</th>
    <th>Email</th>
    <th>Website</th>
  </tr>

<tr>
  <td>1</td>
  <td>Leanne Graham</td>
  <td>Gwenborough</td>
  <td>Sincere@april.biz</td>
  <td>hildegard.org</td>
</tr>
<!-- truncated for brevity -->
</table>

Which gives us this lovely table!

Now, if you're reading this on a narrow screen (and somewhere that has not stripped my CSS!), this table will have a very fancy horizontal scroll to accommodate all of that data.

If I've got this horribly wrong, the table is absolutely destroying my page!

To get the table to do that sexy side scroll instead of ruining your layout, you're going to need to override the table's natural state of being…

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

Yes, that's right - instead of display: table; which is the default from the user agent stylesheet, we use display: block;. This allows us to prevent text wrapping (white-space: nowrap;) and the all-important overflow-x: auto; which does 99% of the magic for us.

We should set the overflow value to auto instead of scroll so that the scrollbars will only show if the table needs to scroll and not all the time.

Conclusion

So, we've learned that there are situations where it is right and proper to use the table element and we've learned how to prevent the table's base nature from ruining your design on narrow screens.

I hope this helps someone like it has helped me 😎

Fin

Cover image courtesy of Dimitra Peppa.

onward-journeys module