We usually benefit from the tables on our websites when we need to offer too much data to our visitors. They are the best elements that allow us to share the data in an organized manner. While they work on computers flawlessly, they may function poorly in mobile platforms.

However, there is nothing to worry about since there are plenty of solutions that can help you to create responsive tables in WordPress. As you know, responsive design is one of the most important elements in website design and it allows your visitors to display the tables without any problems in their mobile devices.

Below, you are going to learn all the details, including how to create responsive tables in WordPress. So, let’s start!

Table of Contents

1. A Brief Summary of Responsive Tables
2. How to Create Responsive Tables in WordPress (With Plugins)

2.1. Installing the Plugin

2.2. Data Entry

2.3. Formatting Your Tables

2.4. Testing the Tables

3. How to Create Responsive Tables in WordPress (Without Plugins)

3.1. Formatting Your Tables

3.2. Adding a Custom Tag

3.3. Testing the Responsiveness

1. A Brief Summary of Responsive Tables

Tables allow us to share plenty of data in a single, small and predetermined area in an organized way. Although they are great, it may be challenging to keep the same form in mobile devices. If a table is not responsive, this leads the mobile users to view the table in various formats which all of them are wider than their screen.

On the other hand, responsive tables allow you to offer a better user experience (UX) by defining the size of the table in different screen sizes. In this way, your table will automatically reformat itself to perfectly fit the screen size of your visitors.

This reformatting is usually performed in the form of stacking. However, depending on the screen size, a scroll bar may also be included. Shrinking is not an ideal option since it will lead the data unreadable and therefore lead to poor user experience. The good news is, creating a responsive table is quite easy.

2. How to Create Responsive Tables in WordPress? (With Plugins)

You can create responsive tables in WordPress with or without plugins. As the first method, we would like to start with the method that allows you to create them with plugins. This is the most ideal choice for those who are looking for a quick solution and do not want to deal with codes or CSS. As you can guess, many plugins allow you to create a responsive table in WordPress and we are going to use them in this section.

2.1. Installing the Plugin

In this section, we will introduce some of the most practical and easy-to-use plugins you may want to install to create your responsive tables. You need to choose and install one of them. Here they are:

• WP Responsive Table: This is a free and easy-to-use plugin that allows you to create responsive tables. The plugin creates tables that can be scrolled horizontally in mobile devices.
• wpDataTables: Another free plugin which also offers a paid version. However, there are plenty of features offered to create tables and charts in the free version.
• Ninja Tables: It is regarded as the best plugin for creating responsive tables. It offers hundreds of responsive tables to users.

In the following, we will explain the steps for creating a responsive table by using Ninja Tables. The steps for creating these tables are typically the same in all plugins.

2.2. Data Entry

Once you install and activate your plugin, you need to follow NinjaTables > All Tables > Add Table to start building your responsive table.

As you can create a new table, you can also use the “Import Table” feature to import any existing tables. In this section, we will create a new table from scratch by clicking on “Add Table”. When you click this option, the following screen will be displayed where you can type table title and description.

If you are using WooCommerce on your website, you can also create a responsive WooCommerce table on this page. Once you are done, you can click the “Add” option to create your first table. In the new page, you will find the option “Add Column” to start formatting your table.

In the new page, you can type the header name for your column and the data it will include. It is also possible for you to set “Responsive Breakpoint” on this page.

This option will allow you to determine the responsiveness of your table in different mobile devices. You can choose different options on the drop-down menu.

After you format all your columns, now you can click on the “Add Data” option. The best part of NinjaTables is it allows users to add multiple entries easily:

If you check the “Continue Adding” option, you can enter data one by another to enter all the data quickly. Once you are done, you can close the window by clicking the cross on the top right section and return to the editing page.

2.3. Formatting Your Tables

Once you are done with the data entry, it is time to set and adjust style options. You can access to many settings regarding your table from the “Table Design” and “Style” options.

Here you can change the settings of many elements such as the style, row colors, hiding data, centering text and much more.

2.4. Testing the Tables

One of the best parts of NinjaTable is it allows you to test your tables while you are editing them. You can test your tables in desktop, tablet, and mobile from the “Table Design” option.

Plugin users can test and view their tables in all of these three platforms from this screen.

In addition to these, you can visit the Block Editor menu and then click on the “Formatting” option to add your tables manually with their shortcode in your contents or pages.

3. How to Create Responsive Tables in WordPress (Without Plugins)

Another option to create responsive tables in WordPress is CSS. You do not have to be an expert in coding, and you can easily create tables by following this guide. It will be better for you to try creating responsive tables with CSS on a child theme first.

3.1. Formatting Your Tables

In this section, we will reformat a sample table by intervening in the breakpoints. Moreover, we will not include a scroll bar but group the data to offer a more readable format for mobile device users. Thus, our table will not require horizontal scrolling.

We believe that this method offers a better user experience since scrolling may cause distraction.

First thing first, you need to make sure that you have a properly formatted table to work on. It is quite easy to achieve this when using Block Editor. All you need to do is add <thead> and <tbody> to ensure that the CSS will work without any problems:

After you created your table, you can adjust the format by using the HTML editor. Make sure that <thead> and </thead> will cover all column headers. In the same way, <tbody> and </tbody> should cover the data in the table.

By doing so, your style sheets will know which data is the headers for your columns and which data is the body of your table.

3.2. Adding a Custom Tag

We would like to note that each theme’s structure is different and may require applications in different parts. However, to put it simply, we will use the WordPress Twenty Nineteen theme in this section to implement our custom CSS code. The theme is already a responsive theme that is offered by default to every WordPress user.

This theme does not require any JavaScript library to implement CSS code however, some themes may require.

We can add our custom CSS code by navigating Appearance > Customize > Additional CSS. Our custom CSS code is:

@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;
	}
	}

All you will need to do is click on the “Publish” when you paste your code in the editor.

3.3. Testing the Responsiveness

You can easily test your new code through the built-in screen test feature of WordPress for three different platforms. You can click on the small icons located at the bottom of your screen to adjust your current screen according to different sizes.

In this code, we used the breakpoint of 600px for our CSS. However, you can adjust the value according to your purposes and needs. Your table includes all the required HTML attributes and compatible with CSS.

This method allows you to adjust the table and makes it responsive by reorganizing the data for mobile users. It does not include a scroll bar. In this way, mobile device users can scroll the table vertically and check the data of each individual cell easily.