UPDATE: While the new table block from Gutenberg is responsive-ish, it will still look bad if you have a lot of columns. Unfortunately, the below code won’t work with Gutenberg, but it will work in case you’re using the Classic Editor plugin.

If you don’t use a specific plugin for WordPress tables, and you simply create an HTML one in your Text editor, or you use the TinyMCE Advanced table feature, which I think that many of you do, then the table won’t be responsive by default.

table not responvie in wordpress

In this post, I’ll show you how to make your table responsive in WordPress, without using yet another plugin! We’ll just get our hands dirty by adding a little bit of CSS, just a little.

I’m going to use the easiest method, so all of you can implement it without any hassle.

The table won’t be responsive in a traditional kind of way, because it will look pretty bad with all the columns squeezed together vertically. Instead, we’ll add horizontal scrolling to it!

Make a table responsive in WordPress

1. After you’ve created your WordPress table, you’ll have to add a CSS class to the <table> tag, like, responsive-table, resulting in <table class="responsive-table">.

In order to add the CSS class, you’ll have to use the Text editor, not the Visual one!

Responsive table in WordPress with CSS

2. Now, after adding the class, add the following CSS code in Appearance – > Customize -> Additional CSS:

@media only screen and (max-width: 768px) {
.responsive-table {
overflow: hidden;
overflow-x: scroll;
display:block;
}
}

css code responsive table in wordpress

Now, just the WordPress table itself can be scrolled horizontally, not the whole page, so it won’t break the layout and design, like it would happen if the WordPress table wouldn’t be responsive – see top image.

 

The way it will display on mobile devices can differ. On some, a horizontal bar will appear, on others, it won’t, but the table will still be horizontally scrollable.

The best way to see this is to check it on your smartphone, and not use a mobile emulator.

Every time you’ll add a table in the future, you’ll just have to add the class inside the <table> tag (step 1), that’s it! You won’t have to add the CSS code again (step 2)!

That’s a wrap

Hope you liked the post and found it comprehensive enough, in order to make your WordPress table responsive, without using any plugin!

If you have any questions or thoughts, drop a comment, contact us or message us on Facebook.

You can also follow us on Twitter and subscribe to our YouTube channel.

If you want to start your own WordPress blog, or need a website for your business, our WordPress services are at your disposal! We also provide WordPress support and maintenance!

You can also purchase a ready-made WordPress website with hosting and support included!