How to Make a Table Responsive in WordPress Without a Plugin

>How to Make a Table Responsive in WordPress Without a Plugin
  • spreadsheet table

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!

By |2018-07-25T20:29:11+00:00May 15th, 2018|Customization, WordPress|8 Comments

8 Comments

  1. Kalpana May 16, 2018 at 2:17 PM - Reply

    Thank you for sharing.
    This is helpful.

  2. Jane Johnson October 11, 2018 at 4:46 AM - Reply

    I tried it, and it didn’t work. Is there something I am doing wrong? I added the CSS code as well.

    • ThemeSkills October 11, 2018 at 1:38 PM - Reply

      Is there anything changed? Or the code doesn’t do anything?

  3. Larry October 30, 2018 at 3:52 AM - Reply

    Hey, thank you for this. I was trying to add Amazon product links and to have them be responsive on my Page – turns out your solution works with using a table – I’m thrilled!

    1) I added the CSS to the theme
    2) I added the responsive class to the text of the page
    3) I simply copied and pasted the affiliate links from Amazon
    4) Totally works!

    • Larry October 30, 2018 at 3:53 AM - Reply

      *without a table

    • ThemeSkills October 30, 2018 at 9:46 PM - Reply

      That’s great! I’m happy to see that the post helped you out!

  4. Frank November 11, 2018 at 10:38 AM - Reply

    Awesome. It worked. This simply makes the table scrollable on mobile devices which does the job for me.

    Thanks

    • ThemeSkills November 12, 2018 at 4:59 PM - Reply

      Great! I’m happy to see that it worked for you!

Leave A Comment

WP ENGINE OFFER!

20% OFF + 4 months FREE on WordPress hosting
Offer expires on 11/30/2018
To celebrate the release of the Gutenberg editor, WP Engine is offering:
  • 20% OFF the first payment on their shared WordPress hosting plans;
  • 4 months FREE on any annual subscription.

And there's more! Since WP Engine bought StudioPress, all their customers get FREE access to the StudioPress themes, including the Genesis Framework!
 
Disclosure: If you make a purchase using this affiliate link, I might receive a commission from WP Engine, at no additional cost to you! Thank you!
close-link