Have you added a table to your WordPress site and it’s not displaying well for your visitors? Let’s analyze the working methods that will make the table adaptive for correct viewing on any device.
How does WordPress display tables?
It depends on the topic. The tabular data will be rendered according to the CSS rules included in the theme. If you switch the theme, the table display will change.
Some themes are “know-how” to adapt table cells on any device. As a result, the user will see all its contents without scrolling.
However, not all themes provide a responsive display of tabular data. If you’ve added a table to your post and it looks ugly on a tablet or smartphone, read on for how to fix it.
Why is the table adaptive?
Let’s create a simple table as an example.
<table> <caption>The most popular IT companies in 2020.</caption> <head> <tr> <th>Company</th> <th>Q1</th> <th>Q2</th> <th>Q3</th> <th>Q4</th> <th>Q5</th> <th>Q6</th> </tr> </thing> <body> <tr> <td>Microsoft</td> <td>20.3</td> <td>30.5</td> <td>23.5</td> <td>40.3</td> <td>45.23</td> <td>39.3</td> </tr> <tr> <td>Google</td> <td>50.2</td> <td>40.63</td> <td>45.23</td> <td>39.3</td> <td>23.5</td> <td>40.3</td> </tr> <tr> <td>Apple</td> <td>25.4</td> <td>30.2</td> <td>33.3</td> <td>36.7</td> <td>22.3</td> <td>29.3</td> </tr> <tr> <td>IBM</td> <td>20.4</td> <td>15.6</td> <td>22.3</td> <td>29.3</td> <td>33.3</td> <td>36.7</td> </tr> </tbody> </table>
It can be seen that the user will see only those cells that fit within the screen. To see the rest, you need to use horizontal scrolling. On a phone or tablet, this is inconvenient.
How to make a table responsive in WordPress?
There are 2 ways. The first is to use plugins that add the necessary styles themselves. The second is to manually write the rules for displaying tabular data on mobile devices. Let’s take a look at both methods.
Method 1: Responsiveness with a Plugin
This method is simple and recommended for beginners.
There are several free solutions in the VP catalog that automatically add adaptability to tables.
Magic Liquidizer Responsive Table
The plugin does not require any settings and works after installation. Our mobile table will look like this:
Automatic Responsive Tables
This WP add-on doesn’t need to be configured either.
Try both plugins and choose the one that suits your tables.
Method 2: Responsiveness with code
All subsequent actions involve editing functions.php, the main WordPress theme configuration file. If you do not know how to edit this file, then the ProFunctions plugin will help in this case.
Open functions.php and at the very end add the following code: