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

0
565
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’s of course some pretty awesome table plugins that would do the job.

But sometimes, you just have that ONE table and you don’t feel like installing a plugin. Feels like overkill amirite… Easy enough. You’ll probably think to just paste some HTML and voila! Just one problem though…

How to Create Responsive WordPress Tables

Table width too large

HTML table width too large

Does your WordPress table look like this?

Obviously the table is way too large for the content area or screen. And the same can also be said for the mobile version. Other than the obvious readability issue, this is terrible for user experience and search console would probably give you a “Content wider than screen” issue for mobile experiences. And 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 simple solution to this problem is to enable a horizontal scrollbar to allow users to scroll the oversized table horizontally. Simply wrap the table 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 your table kinda 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 TablePress tables.

TablePress Responsive Tables

If you are using TablePress, you also notice that the free plugin does not have responsive tables enabled. You do have an option to enable horizontal scrolling if datatables is enabled.

TablePress datatables

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

Navigate to “Plugin Options” within TablePress

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

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