How to create a responsive HTML table

Sometimes, using a table is the best option, but making them responsive isn’t very fun. Luckily, it doesn’t have to be that hard!

We do need to be careful though, because when we change the display property of the different elements in a table, it will strip them semantics away, but there’s a nice and pretty simple fix for that as well 🙂.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:46 - Setting up the table
07:00 - My main source of info for this
07:31 - Basic CSS to get the table looking better
10:19 - Very simple responsiveness
11:07 - More CSS styles to improve the look
13:30 - The easiest way to make it responsive with a table-container
15:31 - A more robust solution
20:55 - Alternative to data-attributes
22:50 - Using grid to improve the layout inside cells a little
24:10 - Fixing the accessibility at small screen sizes

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[Astroplatypus]

It's probably worth including the thead and tbody. A sticky thead is great for big tables and/or small screens.

[orlandosfilmwerks]

This is exactly what I was looking for for the last 2 years! THANK YOU!

[leoschuler]

instead of using the data-cell attribute, I would advocate for the use of headers attribute, which accepts a space separated values of the ids of the <th>s that describes the cell. not only it can be used in the attr() function but with a small css/javascript you could add some cool functionalities to highlights specific cells of the same headers. on complex tables, it is common to have row and column headers, even group headers for a particular set of rows and columns, for those scenarios, <thead> <tbody> and <tfoot> are also a good addition to the table markup

[chriswinslow]

What a fabulous tutorial on tables. I’m really grateful for this. Thanks for working your CSS magic Kevin.

[BenjaminEmm]

Kevin providing the knowledge once again! You're a life saver sometimes with the videos you create. They always seem to come at just the right time!

[RobBulmahn]

You really should use <thead> and <tbody> elements within the table around the respective sections.

[shawnweddle]

I’m building a sports website (including F1) for my portfolio right now and I’m having a little trouble with the tables so this video is quite relevant to my interests 👍🏽

[tobiasfedder]

A video about responsive <table>. Kevin, you are a hero. You could have mentioned the scope attribute also, but it is explained well in Adrian's blog posts. Thank you.

[vladimirmijatovic]

Your video couldn't have arrived at a better time: I'm just finishing an API whose data needs to be displayed in a table. Your video helped me a lot. Thank you so much!

[abiiranathan]

WOW. This is a gold mine. Thanks a lot Kevin. Am sure you will receive a lot of love because this has been a wish for many people.

[_LtLIGMA_]

You are single handedly getting my through my Diploma. Thank god you exist my friend!

[bobwightman]

A great intro to responsive tables and a lot simpler than I imagined.

As for adding data-cell="column heading", I generate most of my tables either through PHP or Javascript so that's pretty easy to add to the template, in this case a JS template string:

`<td ${col_class}

The site is multi-lingual, hence the curLang[field] item.

[fave]

Your solution is great. I usually use the overflow one because most of the time data presented in tables is viewed on larger devices but now that I know that it's as easy and straight forward as this, I don't have to rely on a UI framework to handle tables. Thank you.

[justinkeeth]

This video is exactly what I was looking for. Thank you!!

[benjaminmosnier]

I have known the era of « layout with table » too. CSS was not the same during the Jurassic !

[knghtbrd]

Oh THANK YOU KEVIN! I've struggled a bit with this because at some point you do just need to break the table into stacks or grids or something and the way tables work is just WEIRD. The question was what to do with it once you decide you've gotta break from table to something else, and what precisely that something else should be. Grid is obviously the solution, and while you used it to simply stack everything, you could come up with more complex layouts at a couple different screen sizes to account for e.g. desktop, tablet, and phone.

I had an idea what doing this right might look like, I just needed to see the pieces assembled, so thank you for doing that!

[alvarojflores]

Thank you, Kevin! You're like Joda CSS master. Be healthy and successful!

[LastRoseStudios]

Narrower viewports usually (though not always) are on mobile, which has a touch interface, and so the scrollbar at the bottom is less of an issue. Also, the thead and tbody would be good to add (browsers will probably add it in anyways, but it's better to specify it yourself so you can better troubleshoot things). For example the table headers (first row) got lumped into the tbody

[andygordon]

What a brilliant tutorial. Hits the mark perfectly and easy to follow. Thank you.

[BrianClincy]

We're not using thead? I was wondering if that was part of accessibility or just declarative if your header has multiple rows?