INTRODUCTION
THE UNFORTUNATE TABLES
Welcome to a guide on CSS responsive tables. Tables are one of the “unfortunate” things in HTML when it comes to responsiveness. It will break the design if you allow it to span out of the width of the screen and end up with a horizontal scrollbar… But if you restrict the table to within the screen, the table contents become “squashed”. So how do we deal with tables when it comes to responsive design? Read on to find out.
CONFESSION
AN HONEST DISCLOSURE
Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!
1) 100 PERCENT WIDTH
Column 1
Column 2
Column 3
Column 1
Column 2
Column 3
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Column 1 | Column 2 | Column 3 |
This is the easiest way to build a “responsive table”, and that is to fit it at 100% width. With this, the table will never be wider than the parent container and you will be safe from that nasty scrollbar. But as with the problem that I mentioned in the introduction above, tables with a lot of columns and contents are going to be “squished” on smaller screens with this method.
2) CONTAINER WRAPPER WITH SCROLLBAR
Column 1
Column 2
Column 3
Column 4
Column 5
Column 1
Column 2
Column 3
Column 4
Column 5
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
This is what we do to maintain a “full-sized” table and not destroy the layout of the entire page – The key here is to put the table into a div container. If the table is too wide for the screen, the scrollbar will only show for the container and not destroy the entire page.
3) HIDING COLUMNS
Column 1
Column 2
Column 3
Column 4
Column 5
Column 1
Column 2
Column 3
Column 4
Column 5
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
Personally, I think this is the more elegant solution. When it comes to smaller screens, we hide the columns that are not critical – The table still fits nicely into the screen and will look less cluttered.
4) THE “HACK” WAY – WRAPPING COLUMNS
Column 1
Column 2
Column 3
Column 4
Column 5
Column 1
Column 2
Column 3
Column 4
Column 5
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
Convert the table cells into inline-block on small screens and they will automatically wrap/arrange themselves. Some people will probably find this solution “disgusting” or “hack-like”, but hey, it works… and I personally find it to be quite a genius solution as well.
TRY IT!
Now back to you, I have created a jsFiddle with all the above responsive tables, feel free to play with it:
CLOSING
WHAT’S NEXT?
We have come to the end of this chapter on responsive tables, and I hope that it has helped you to improve your projects. If you have questions, please feel free to comment below. Good luck and happy coding!
The post 4 Ways to Build CSS Responsive Table appeared first on Code Boxx.
