4 Ways to Make HTML Tables Responsive With Pure CSS (no JavaScript needed)
HTML Tables help present tabular data using rows and tables. They’re easy to read and can convey information effectively. However, they don’t display nicely on smaller devices. Depending on how the webpage is set up, tables will distort in some way, reducing the readability of the information and hindering the user experience. To remedy this, we need to make HTML tables responsive. By making tables responsive, the user will be able to read the information on any device, regardless of the device’s screen width.
Here are 4 ways to make HTML tables responsive. What is great about these solutions is that we can accomplish this with just HTML and CSS. Unless you need special functions, JavaScript will not be necessary.
Method 1: Adding a Horizontal Scrollbar
With this approach, the user reads the table while scrolling sideways. This maintains the size of the table by only partially showing it and making the rest of the content be seen by scrolling. This is the simplest way to make tables responsive as you only need to wrap your table inside a container and then add overflow-x: auto; to the container’s style.
So the code will look like this:
<div style="overflow-x: auto;">
<table>
...
</table>
</div>As a result, we have a table that will go from this:
To this. Note the scrollbar that has been added when the screen becomes smaller.:
Although the solution is simple, because you can’t see every table column at once, the table might be harder to read if the user wants to compare rows. This is especially the case if your table has many columns. Otherwise, it’s a straightforward solution for making tables responsive and will be enough for many sites.
Method 2: Create a Table for Each Row
In this approach, a separate table is created for each row. On larger screens, you will see a regular table. However, if the browser is resized or if it is viewed on a smaller screen, it will split into a series of smaller two-column tables with the first column representing the column and the second column representing its corresponding cell of that row.
See this example solution provided by css-tricks.com. Open it in a new tab and open developer tools to see it in different dimensions.
And here’s another example by Matt Smith.
With this method, the information is readable and can fit nicely on any screen. If you have many rows though, it will increase the page length and the user will have to scroll further to read all the data.
Method 3: Create a Table for Each Column
This method is similar to the second method but this time, you are creating separate tables based on each column. This approach is different as from a coding perspective, it is actually multiple tables put side-by-side. When the screen shrinks to a certain width, the tables will resize, making them stack on top of each other to fit the screen.
Here’s an example solution I have come up with.
It requires more code as you need to show/hide columns depending on the screen size.
Furthermore, some adjustments to the table cells may need to be made with CSS since they are separate tables put together to look like one. When I implemented this solution for a website I worked on, I had to manually adjust the heights of some of the table cells to make them the same. Otherwise, some tables look longer than others.
Aside from that though, if your data is stored as columns instead of rows, this solution could be useful.
Method 4: Stacking Columns by Row
This time, when the table is split into multiple tables, the row appears in the header. When displayed on smaller devices, there are two columns with the original columns on the left and the corresponding cell of the row to its right. As a result, you are comparing individual aspects instead of comparing rows and columns. See the solution below by WebAdvanced. (Open in a new tab and open developer tools to see it in different dimensions).
While methods 2 and 3 allow users to compare groups of data as a whole, this method compares data individually. An example of where this approach could be useful is if you were comparing two products. You could do a breakdown of each feature and what characteristics the two products have.
If you need the group of data to be kept together however, this approach will not be ideal. Otherwise, this is a possible solution for making tables responsive.
Conclusion – Which is the Best Way to Make HTML Tables Responsive?
How you choose to make HTML tables responsive will depend on your needs. If you just need a simple solution for making HTML tables responsive, then adding a scrollbar is the way to go. If you are comparing entire rows or columns and need to resize tables, then methods 2 and 3 should work. If you are interested in comparing individual aspects for each column, then consider method 4. Overall, they all achieve the effect of making HTML tables responsive. It is just a matter of how you would want to present this data on smaller screens.