Skip to content

Apologies for the appearance of the site. I'm designing in public!

Several table and chair sets in a Greek courtyard

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?


<td>Leanne Graham</td>
<!-- truncated for brevity -->

Which gives us this lovely table!

ID Name City Email Website
1 Leanne Graham Gwenborough
2 Ervin Howell Wisokyburgh
3 Clementine Bauch McKenziehaven
4 Patricia Lebsack South Elvis
5 Chelsey Dietrich Roscoeview
6 Mrs. Dennis Schulist South Christy
7 Kurtis Weissnat Howemouth
8 Nicholas Runolfsdottir V Aliyaview
9 Glenna Reichert Bartholomebury
10 Clementina DuBuque Lebsackbury

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!

An example of the table wrecking my layout

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.


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 😎


Cover image courtesy of Dimitra Peppa.


In almost all cases, the comments section is a vile cesspool of Reply Guys, racists, and bots.

I don't want to have to deal with that kind of hell so I don't have a comments section.

If you want to continue the conversation, you can always hit me up on Mastodon (which is not a vile cesspool of Reply Guys, racists, and bots).

onward-journeys module