Very different type of post because I want to show you how to create a fully responsive table layout with only CSS. This will help you to display your tables, large or small, on every screen in a pleasant way.
The issue
First, let’s say I’m viewing Wikipedia on my iPhone, I’m looking through the episode list for Star Trek: The Next Generation, and the table has a lot of columns and data. There ends up being a lot of back-and-forth side swiping, device flipping, and general annoyance as I muddle through that user experience.
So, it’s an issue that exists broadly across the web, even though there are several responsive table solutions available. Here a demo of the solution I found.
Create a basic table
So, we’ll create the same table above with some generic HTML
<table> <caption>Statement Summary</caption> <thead> <tr> <th scope="col">Account</th> <th scope="col">Due Date</th> <th scope="col">Amount</th> <th scope="col">Period</th> </tr> </thead> <tbody> <tr> <td>Visa - 3412</td> <td>04/01/2016</td> <td>$1,190</td> <td>03/01/2016 - 03/31/2016</td> </tr> </tbody> </table> After that, our table has four columns. Let’s add some basic CSS selectors to better define the table layout:
table { border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; width: 100%; } table tr { background-color: #f8f8f8; border: 1px solid #ddd; padding: .35em; } table th, table td { padding: .625em; text-align: center; } Responsive time
First, we’ll add a data-label attribute to each data cell with a value that represents that column’s name. That will be used for labeling purposes in the responsive layout.
<td data-label="Account">Visa - 3412</td> <td data-label="Due Date">04/01/2016</td> <td data-label="Amount">$1,190</td> <td data-label="Period">03/01/2016 - 03/31/2016</td> Now, we can begin writing a CSS media query:
@media screen and (max-width: 600px) { table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } table tr { border-bottom: 3px solid #ddd; display: block; } table td { border-bottom: 1px solid #ddd; display: block; text-align: right; } table td::before { content: attr(data-label); float: left; } } In smaller viewports the <tr> and <td> elements will display as block-level and not as table rows and cells. And the ::before pseudo-element now serves as a label.
So, here’s our table (flip your device screen between portrait and landscape view):
Wrap up
In conclusion, this is a simple way to get a nice responsive table layout with only CSS in particular for mobile devices. For any question, please use the form below or create a post in the Forum.
