How to Create Responsive Tables in WordPress

Create Responsive Tables in WordPress

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.

Also see: Free WordPress Video Plugins for Advanced Embedding

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:

function wpschool_adaptive_tables_css() {
if ( is_single() || is_page() ) {
echo '<style type="text/css">
@media screen and (max-width: 600px) {table {width:100%;} thead {display: none;} tr:nth-of-type(2n) {background-color: inherit;} tr td:first- child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} tbody td { display: block; text-align:center;} tbody td:before {content: attr(data-th);display: block; text-align:center;}}
</style>';
}
}

function wpschool_adaptive_tables_script() {
if ( is_single() || is_page() ) {
echo '<script type="text/javascript">
var headertext = [];
var headers = document.querySelectorAll("thead");
var tablebody = document.querySelectorAll("tbody");
for (var i = 0; i < headers.length; i++) {
headertext[i]=[];
for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
var current = header;
headertext[i].push(current.textContent);
}
}
for (var h = 0, tbody; tbody = tablebody[h]; h++) {
for (var i = 0, row; row = tbody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[h][j]);
}}}
</script>';
}
}
add_action( 'wp_head', 'wpschool_adaptive_tables_css' );
add_action( 'wp_footer', 'wpschool_adaptive_tables_script' );

Leave a comment

Your email address will not be published. Required fields are marked *