Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.
A few days ago I got a warning from the Google Search Console. It detected a Mobile Usability issue on a page where I have a big table.
This is the table that gave me the problem:
On mobile, it rendered pretty poorly:
Not a nice user experience, and an error in the Google Search Console. The last thing I want is an error or warning there. Not when it’s something I can fix.
Hugo, the static site generator I use, lets me inject CSS specific to a single page, simply by adding a <style> tag into the markdown file. Handy.
So I started searching for a good way to make my table responsive. I came across this very nice article on CSS Tricks: Responsive Data Tables. It’s from 2011, and still works fine!
The trick is this: we want to make the table display as a block element rather than as a table in the traditional CSS sense. We hide all the table headings by moving them out of the view, and we insert a new block in the table, and each row will have its own set of headings, like this:
Here is the code that achieves the above design:
@media
only screen and (max-width: 1500px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 200px;
margin-left: 150px;
}
td:before {
position: absolute;
top: 12px;
left: 6px;
width: 200px;
padding-right: 40px;
white-space: nowrap;
margin-left: -150px;
}
td:nth-of-type(1):before { content: "Option"; }
td:nth-of-type(2):before { content: "Description"; }
td:nth-of-type(3):before { content: "Type"; }
td:nth-of-type(4):before { content: "Default";}
}The important things to customize for your own table are the last 4 lines: enter the title of each “column”, add more if you have more columns, or remove some if you have fewer.
The other thing is the space that the new “headings” will take for each row. I used a 150px margin, and you need to reference it in two places: as margin-left: 150px on the td, and as margin-left: -150px in the td:before.
Finally, you need to decide when this new layout kicks in. I made it active when the viewport is less than 1500px, because that table is huge. I could as well make this the default behavior rather than displaying the normal table on huge screens, but so far I think the problem is solved.
I hope this helps.