How to Create Responsive Tables in WordPress Without Plugins

How to Create Responsive Tables in WordPress Without Plugins

Making your site easy to view on all devices is crucial – especially now that Google is creating a separate “mobile index” for smartphones and tablets. Many WordPress themes are responsive out of the box. However, one thing that still trips them up regularly is tables. Sure if you’re lucky, your theme designer was thoughtful enough to handle tables gracefully. But often this isn’t the case. Even the Genesis framework doesn’t have an in-built way to handle responsive tables in WordPress.

There are a few plugins out there for creating tables that adapt to the width of the device. But it’s not worth it if you just want to display a one off table in your post. In this article, I’ll show you a few quick steps you can take to ensure that your table scales nicely with the screen.

Step 1: Generate the Table HTML

By default, there’s no way to generate the table HTML from within the WordPress TinyMCE editor. If it’s a functionality you will need regularly, it might be useful to put a table button there using my earlier tutorial on TinyMCE table buttons. On the other hand if it’s just a one time table or you don’t see the value in a button, you can generate the table HTML on a site like this.

Paste the table HTML into the “Text” tab of the WordPress editor, and type in your contents.

Step 2: Add “width: 100%” to the <table> tag

If the table doesn’t have any “width” attribute or has a specific width, it can get cut off like this:

table-getting-cut-off

To make the table responsive, change the <table> tag to the following:

<table style="width: 100%;">

This will ensure that the table both stretches and compacts to the width of the device, allowing it to become more responsive.

Step 3: Determine the Smallest Device you want to Design for

This is a crucial step. There will come a point when it becomes meaningless to show the table. Personally, I choose to design for a minimum of 300px. Below this, and it becomes difficult to view even a normal webpage, let alone a table. Your requirements might be different and will vary depending on what kind of table you’re designing for in the first place. For example, you might want people to only view it on tablets.

Whatever your requirements, find out how many pixels you want it to be. If you don’t know, you can open up the Google Chrome developer tools by pressing “Ctrl+Shift+c” on your keyboard, and click the icon for the mobile view as shown here:

mobile-view

Once in this mode, you can drag the slider on the screen back and forth to find the minimum screen width you’re looking for. The numbers at the top will tell you the dimensions.

Step 4: Determine the Font Size for the Screen Width

Set the Google Chrome developer tools to the mobile view, and find out at what point the table starts to “break”. Chances are, that even the “width: 100%” setting won’t prevent the table from getting cut off like this:

getting-cut-off-again

Make a note of the screen size at which is begins to break and insert the following CSS rule:

@media screen and (max-width: 300px) {
   table {
      font-size: .66em;
   }
}

Here, replace the bold “300px” with the screen width at which you table starts breaking, and change the bold “0.66em” with the number at which it starts displaying properly again. You can get the immediate previews using the Chrome developer tools as shown here:

smallest-width-font-size

You can create several sets of rules for different widths at which the table breaks. Make sure you have a final rule for the minimum screen width in Step 3.

Using this technique, you can ensure that your table scales properly with the screen size (up to a point). Responsive tables in WordPress require work to display correctly. This way, you won’t have to use a plugin or Javascript!

Leave a Reply

This Website is Hosted by

Powered by RamNode

Disclosure: We receive a compensation from some of the companies whose products or services are presented on our website.