Tables are perhaps the best method for sharing data in a way that’s easy tounderstand. They enable you to show comparisons between prices, products, andmany more types of information. Unfortunately, WordPress isn’t the best when itcomes to displaying responsive tables.
Every WordPress theme handles tables differently, and some do a better job thanothers. Knowing how to create responsive tables regardless of which theme you usewill enable you to provide a better mobile user experience.
In this article, we’re going to talk about how WordPress handles tables out of the boxand why that approach isn’t always ideal. Then we’ll go over two methods forcreating responsive tables in WordPress. Let’s get to work!
An Introduction to WordPress Tables
Adding tables in WordPress is simple. The Block Editor includes a dedicated Table block, which you can place in any post or page.You can also modify these specifications later if needed. Once the table is in, you can fill it any way you want and edit its text just as you would a standard paragraph block.
However, things often start to get tricky when you access your website from amobile device. The larger your tables are, the more likely it is their content will not display properly. We’re using an example with very succinct content and a modest number of rows.
The more text and rows a table contains, the more likely it will ‘break’ when you tryto squish it into a smaller viewport.This is not necessarily a deal-breaker for some people. However, it does mean your tables won’t be as engaging or readable as they could be.Also, keep in mind that we’re talking about HTML tables and some themes includedifferent styles. In our earlier example, we used the default Twenty Twenty theme.
How to Create Responsive Tables in WordPress (2 Possible Approaches)
As usual with WordPress, there are two main ways you can tackle this problem with a plugin or manually. We’ve explored both below.
1. Use a Plugin to Make Tables Responsive
There are many plugins that can make your WordPress tables responsive. One of our favorites is Ninja Tables
With Ninja Tables, you can use advanced features for mobile displays such as stacking your table’s columns, hiding specific columns, and more.
After you install and activate Ninja Tables, you can navigate to Ninja Tables > All
2. Tables to create a new one
In the table editor, click on the Add Column button to start creating columns. For each, you’ll have the option to hide the entire column on desktop and/or mobile devices.
Once you’ve created all your columns, click on the Add Data button to create your table’s rows. When you’re finished, switch over to the Table Design tab.
Here you can preview how your data will look on desktop, tablet, and mobile devices using the buttons above your table.You can also generate stackable mobile displays by selecting the Enable StackableTable checkbox and specifying which devices to apply this feature to.
WordPress, they often require you to edit each table by hand, as seen above. This can become time-consuming, which is why you may want to tackle the issue through custom code.
Modify Your Theme Files to Make Tables Responsive
One solution for making tables responsive manually is to implement horizontal scrolling:
To do so, you’ll need to add a specific class to the HTML tables you want to make responsive, such as .
Then, you can add this code to your theme’s style.css file:
This sets a breakpoint using the max-width attribute. When the width of the viewport is below that size, your table will become scrollable. However, this isn’t the most elegant solution for displaying tables on mobile devices.
Alternatively, you could use a bit of CSS to stack your columns.
This is our favorite method because it’s highly readable on the vast majority of screens, and makes it easier for visitors to interact with your tables.
To implement this change, you need to do two things:
- Add and tags to your WordPress tables.
- Add a CSS code snippet to your theme’s stylesheet to configure a breakpoint and re-arrange your table’s columns.
- First, open the Block Editor and select the table you want to work on. Then click on the three-dot icon in the block toolbar and select the Edit as HTML option.
- Editing your tables’ HTML using the Block Editor can be a bit tricky since it doesn’t include spaces. In a nutshell, you want to wrap your column headings using tags and the rest of your table content with tags.
That’s a shortened example to show you the gist of it. Once you add the requisite tags to your table, open your theme’s stylesheet.
This sets your breakpoint at 600px and triggers a re-arrangement when you view the table on a smaller screen.The only downside to this approach is that you have to add and tags to all your tables manually. It’d be simpler to enable stackable displays with Ninja Tables.Instead, we recommend checking out this JavaScript code (courtesy of the same author as the previous snippet), which enables you to automate that process.
Conclusion
If you rely heavily on tables to display data on your website, then you need to make sure they’re fully responsive. Default WordPress tables will display on mobile devices. However, depending on your theme, they may not adapt well to smaller screens, and you won’t be able to convey information as effectively.
There are two primary ways you can go about creating responsive WordPress tables:
1. Use a plugin such as Ninja Tables to hide or stack columns on mobile devices for individual tables.
2. Modify your theme files to make tables scrollable or stack their columns automatically.
Do you have any questions about how to create responsive tables in WordPress? Let’s go over them in the comments section below!
Eastlink Cloud Pvt. Ltd.
Tripureshwor, Kathmandu, Nepal
Phone:166001-95985
Mail:info@eastlinkcloud.com
