WordPress: How to make tables responsive

Many of the WordPress themes (even some really good ones from Envato Market) do not have the necessary styles to make the tables responsive. I often see clients coming with a purchased theme complaining that the pages are not behaving as they should for smaller screens. And most of the times I find that the problem is caused by the presence of a table that lacks the responsive styles. The following two snippets are the CSS fixes I use to solve this problem. If you just want to add responsive capability for the tables inside your WordPress page editor, then use the Basic one. But if you want to make those tables look more modern and eye-catching, then use the Stylized one.

The Basic

The Stylized

Live Example

Here is an example of how the stylized table will look like:

I hope this helps you in some projects!

Advertisements

Ask a question or leave a reply!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s