Responsive Table Solutions with CSS & Javascript

When publishing on the web, your content will typically fall into one of these categories:

  • Text
  • Video
  • Graphics
  • Audio

That covers pretty much everything you would publish.

Today we're taking a look at how to present a special type of written content: data. I use the term data loosely as any structured information best conveyed in a table.

Now here's the thing about tables: they don't fit well into small screens.

Way back in the day when computers were still strange, esoteric gray boxes, businessmen did their finances with pen and paper. They would create massive tables on paper that spanned entire tables. Sounds completely peculiar now, but that's how it was done. It wasn't until the first spreadsheet software was invented that this changed and tables (the visual kind, abstract code databases already existed) began to be integrated into computers.

You're surely familiar with Excel and Google Sheets. The programs work great on your computer, but they're tricky to use on mobile. Google Sheets does a pretty impressive job, but what about you? Sometimes you'll need to display data on your site in table form and getting it to display well across all the various screen sizes can be a nightmare. Lucky for you, this problem has been around for quite some time, so other devs have created some pretty nifty solutions.

I browsed through a few examples on Codepen.io and here are the best ones I found.

Responsive table solution #1

The first solution is 100% CSS which is pretty cool.

The labels are all moved to the left side so that they don't get bunched up at the top. While the visual isn't so nice, this layout works pretty well.

Link: Responsive Table on CodePen.io

Responsive table solution #2

This next one is really interesting. It's similar to the first solution, but it uses the first cell in the header as a new header to separate the table entries. Here, take a look:

Link: A Better Fluid Responsive Table

Responsive table solution #3

This last solution is my favorite. It breaks each table entry out into its own box which not only looks beautiful but is also very easy to scan:

Can you believe that it's done entirely with CSS? And no, the markup isn't weird, it's perfectly valid HTML.

Link: Simple Responsive Table in CSS

Conclusion

I thought I'd be reviewing a lot more jQuery when I started this post, but I was really impressed with what people have come up with. There's nothing wrong with using Javascript to make tables more mobile-friendly, but it's hard to support when there are such wonderful solutions with pure CSS.

Thanks for reading and I'll be back with more soon. Next up will be a bit more about publishing written content and making it responsive.