How to enable Responsive Tables in WordPress [CSS – TablePress]

0
741
How to create responsive tables in WordPress

In the course of your WordPress journey, you’ll probably have come across the need to create a table for yourself or for your client. There are, of course plenty of pretty awesome Table plugins that would do the job.

But sometimes, you just have that ONE table to insert and it doesn’t make any sense to install fresh plugin. Simple enough. You’ll probably think to just paste HTML directly into the post and voila! Just one problem though…

How to Create Responsive WordPress Tables

Table width too large

HTML table width too large
Too many columns in HTML table causes width to be too big

Does your WordPress table look like this?

Obviously the table is way too large for the content area or screen. This usually happens when there are too many columns in the table. And the problem is amplified when viewing on mobile smart devices. Other than the obvious readability issue, this is terrible for User Experience. Furthermore, Google Search Console would probably give you a “Content wider than screen” issue for mobile experiences. Of course, we don’t want any of that.

Fortunately, there’s a simple fix for this.

Responsive Horizontal Scroll Table

Table Horizontal scroll
A horizonal scrollbar can be enabled for oversized tables

A simple solution to this problem is to enable a horizontal scrollbar to allow users to scroll the oversized table horizontally. Simply wrap the <table>element with a <div>element and add in a little bit of CSS. Like so:

<div style="overflow-x:scroll;">
 <table>....</table>
</div>

Great! now we have a horizontal scrollbar for our table. Easy Peasy! However, you might feel that adding a wrapper around all your HTML tables cumbersome. Especially if you have content before and after the table. In this case, applying the CSS code directly on the <table>element works as well.

You’ll also need an additional CSS rule to change the display mode:

<table style="overflow-x:scroll; display:block"> .... </table>

You can also apply this very simple fix with on TablePress tables.

TablePress Responsive Tables

If you are using TablePress, you also notice that the free plugin does not have responsive tables enabled. However, you do have an option to enable horizontal scrolling by enabling DataTables.

TablePress datatables
Enable horizontal scrolling in TablePress

Simply enable DataTables and check on “Horizontal Scrolling” to enable this feature. A regular static table however does not have this option.

If you do not wish to load additional JavaScript just for horizontal scrolling, we can also apply the CSS code to TablePress tables.

Default TablePress
TablePress Table without Horizontal Scroll

Navigate to “Plugin Options” within TablePress

TablePress Plugin Options
TablePress Plugin Options

Enter the following CSS codes in the “Custom CSS” option. Warning: this code enables the responsive behavior in all TablePress tables.

.tablepress { 
 display: block; 
 overflow-x: scroll; 
}
Responsive TablePress Table
TablePress Tables with CSS code applied

Conclusion

And there you have it! A simple fix to create and enable a Responsive Horizontal Scrolling with some CSS.


Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments