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?
<!-- truncated for brevity -->
Which gives us this lovely table!
|4||Patricia Lebsack||South Elvis||Julianne.OConner@kory.org||kale.biz|
|6||Mrs. Dennis Schulist||South Christy||Karley_Dach@jasper.info||ola.org|
|8||Nicholas Runolfsdottir V||Aliyaview||Sherwood@rosamond.me||jacynthe.com|
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…
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.
Real. Simple. Syndication.
Get my latest content in your favorite RSS reader.
I use InoReader but you don't have to.
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).