A Short Guide to Using HTML Tables in the Modern Age

2.2 Creating Responsive Tables

If we had to compare the old days of the web with the modern age we're living in today, probably the first thing that comes into mind is responsive web design. Nowadays when creating a website, we need to make sure it looks good on a wide range of devices from smartphones to large desktops. Well, tables are no different. And in fact, we need to pay close attention to them. Because of their nature, tables can display large amounts of data, more than usually organized in a lots of different columns. So it's not a problem of height, but width. Now let's see an example. We have a simple table here with three columns. So on a normal screen size, this looks just fine. As soon as we start shrinking this and currently we are at 500 pixels. And we'll shrink it even more. All right, you can see that in some cases, we don't actually need to do anything. Because it's a short table, it's gonna do just fine on the mobile. Right here, I'm at 355 pixels in width, and as you can see, the text wraps. The columns resize nicely. And this particular example doesn't need any kind of work. It'll do just just fine on mobile. However, if we're gonna add some more columns, like in this example, I added availability and email. It still look fine on large screens, but when we start shrinking this table to simulate smaller devices, well, this when we start seeing some problems. All right, the text can only wrap as much. This right here is a full word, it cannot do word wrapping. So instead, it stays the full width. And the table is doing its best to resize, but it can only go so far. So in this case, we're left with a scrolling canvas, which is not what we want. So let's explore some approaches of making this work a little bit better on smaller screens. I'm gonna head over to the CSS right here. I just have some demo styles for the table, just setting some padding and background color to create this zebra effect. If you, Looked at the markup, you saw that we have a div class wrapper around the table. Now with that div class wrapper, we can do this. We can set an overflow of auto and we can set a max width of 100%. So what this will do is it will move our scrolling bar from the page to the actual table. So now we can scroll the table horizontally instead of scrolling the entire page, like we were doing before. So now we can go to an even smaller size. And our page will not be affected, but we can still see the entire table when we scroll, of course. This is not necessarily the best approach, but it's something you can do in a pinch. And it gives you a slightly better experience on mobile than what we had before. Another approach is to hide irrelevant columns on smaller screens. All right, so to do that you will do the following. You would start with a series of media queries. Let's resize this a little bit. So you would say medium. Let's say that when we have a maximum width of 720 pixels, which is about the point where we started getting the scroll bar on our page, we hide this email column. So to do that, it's actually quite simple. We're gonna target the th or the table heading nth-child(5). So we're targeting the fifth table heading here. And we're also targeting all of the table cells in this fifth column. So tr td @child(5). So we'll set a display none and a visibility heading, okay? So now when we go past that break point, we should see a change here, but it doesn't. I might have made a mistake here. I actually forgot the units here. So 720 pixels. There we go. So now when I resize, you'll notice that when I get under 720 pixels, that fifth column disappears. So now, we can go in, resize this even further and see where we have our next break, which is around 465. So we're gonna do the same here. We're gonna say 465, and we're gonna hide this location, so this is the second column. Right. So anything under 465, we hide that second column. And then we can go even further and see where our next break occurs, which is around 365, 370 maybe. So in that case we can remove the specialty call, okay? So I said 370. Let's do that, we're gonna remove number 3. Okay, so now we have a table with only the essential columns on small screens. And as we go to bigger and bigger screens, we start showing we're adding in the other columns. So by doing that we're making sure that we never get that horizontal scroll bar. Now, the thing is, this approach will not always work. You will not always be able to hide certain columns on mobile devices, because those columns could contain important information. In which case, we need to go to approach number three, which will basically transform all the table elements into blocks. So instead of having the table that goes column, column, column, column, well, those columns will be kind of turn around and be displayed like this, right? So we're displaying the information in a vertical faction, in a block faction, instead of an inline faction. This technique was first documented on the CSS tricks many, many years ago. And that's where I got it from. You'll find links to the original post in the lesson notes. I'm gonna give you a simplified version in this example. So let's go ahead and comment these. Now, let's do approach number three. So we're gonna say medium. We're gonna use the same break point of 720 pixels. All right, so as soon as we're hitting that mark where the horizontal scroll bar appears, here's what we'll do. First, we'll target all elements in my table. So table t heads, t body, th, td, and tr. And I'm gonna set display to block. I'm gonna just resize this so you can see the changes happen. Right, so this is what we have so far. And the way we want it to look is we want one of these rows to contain the tables headings on one side and then the table cells or the values on the right side. So let's remove the T head, which is this. And by removing and basically setting a position absolute and opacity to 0. I'm simply hiding it from view. I'm not using display none because I still want this to be accessible and be read properly by a screen readers. So by doing that we're just left with the actual information. All we have to do now is bring back the table headings, but in a different fashion. So here's how we'll do that. We'll say td:nth-of-type(1). So basically targeting the first table cell. And we're gonna target the before element. I'm gonna set its content to name. All right, so as you can see it appears here, name. And we're gonna do the same for all the other tds. So number 2, 3, 4, and 5. So what do we have? Stickleback, we had location, we had specialty, we had availability, and we had the email. So now when I go back, you can see that before each value in a row, we have these before elements on all of them. That's pretty cool, right? Now, let's make it look a little bit better. Let's separate each row a little bit better. We'll use a margin because now it's displayed as a block so we can use margins between rows. And let's also target each table cell. We're gonna add a border bottom one pixel solid just to separate these a little bit better. And let's target the last child and remove the border, so from this one, from this one, we're removing the border. And also let's push these values to the right side. So to do that, we'll say, td::before, margin-right: auto. And let's also, going to the td, and set display to flex. So it can basically use any kind of layout you want here. It can even use a display grid, if that's what you want. And then you can say grid template columns, let's say 1fr, 2fr. All right, so that will display these nicely in a more organized fashion. You can also set a font weight on bold to the before elements. So now, using this approach, you go from a normal table like this to this table, which behaves really, really well on mobile devices. Now, it's a little bit more. Time consuming to create because if you have a large table you need to create these before elements for each table heading. But this can be automated via JavaScript. So it's not that big of a deal. But yeah, this is one of the most rock solid approaches to building a responsive table. So, again, how are we doing this? We start by making all of the elements in our table behave as a block element, so it goes from top to bottom. Then we're hiding the initial t head, which is this section right here, basically. And then we're basically replicating those table headings as before pseudo elements on each table cell, all right? So this is a table cell here. We're adding a td to it. And for the content we're setting the names of the original table headings. And then it's simply a matter of giving these the proper style. You can use display: grid, display: flex, you can even float these. It doesn't really matter. Now, if you prefer using an external or a third party tool to achieve this, there are a couple that you can use. One of them is the tablesaw plug-ins from filament group. And by the way you will find links to all of these in the lesson notes. So this is a plugin for responsive tables, and you can see some demos here. They have a lot of responsive styles for you to choose from. And then you also have stacktable.js, which is a jQuery plugin that does the same thing. And you also have this solution called Responsive Tables that works in some more fashion. All of these are free, you can go ahead and use them in your own projects today. All right, so that's a short guide to creating responsive tables. Now, because of the large volume of information that you can put in a table, a pagination and sorting system might be a good addition. Let's have a look at how we can implement those in the next lesson