How to Create Responsive Tables in WordPress

Tables are a website design element that can help you elegantly display large amounts of information in an organized way. They work quite well on traditional computer displays, but can often create an undesirable experience on mobile devices. 

Fortunately, there are several workable solutions for creating more responsive tables. Using these responsive design practices can improve the User Experience (UX) of your site. This means visitors will be able to more easily view and access the data in your tables, no matter what type of device they’re using.

In this article, we’ll take a look at what it means to make a table responsive. We’ll then walk through two ways to create responsive tables in WordPress. Let’s dive right in! 

What are responsive tables?

Typically, the goal of a table is to display lots of data in a way that makes sense. When you try to view a tables on a mobile device, however, things can go awry. This happens because table rows are often many columns wider than your screen’s display can handle.

When you create a responsive table, you’re essentially creating a set of rules for your original table of data. These rules can determine breakpoints based on display size. This means that if a user accesses the table on a device that’s smaller than your set breakpoint, the table layout will respond by reformatting to fit the screen size.

Responsive tables typically can be reformatted by adding a scroll bar or stacking the information. You don’t want to just shrink and cram the information in the cells together as the screen size changes, since this can make the table unreadable. Fortunately, responsive design isn’t too hard to achieve. 

How to make a responsive table (without a plugin)

There are essentially two approaches to making a table responsive in WordPress. First, we’ll take a look at how to get the job done without a plugin.

This will require some coding knowledge: specifically, an understanding of Cascading Style Sheets (CSS). We also recommend working in a staging or development environment rather than on your live website, until you design a table that works reliably. 

Step 1: Format your table for responsive CSS

In this example, we’re going to tell our sample table’s data to reformat at a specific breakpoint. You can simply add a scroll bar to a table in some cases, but we’re going to actually group the table’s data so it appears in a more readable format that eliminates the need for horizontal scrolling.

This is a great approach, since horizontal scrolling can often mean you’re viewing a column’s data out of context: 

To make this table work better, you’ll need to first be sure you have your table formatted properly. If you’re creating a table using the Block Editor, you can do so normally and then add <thead> and <tbody> attributes to make sure your CSS will work properly:

Once you add the table, you can use the HTML editor to adjust its formatting. Your <thead></thead> attribute needs to wrap all of your column headers. Similarly, you’ll wrap all of your subsequent table data in the <tbody></tbody> attribute. 

Once you add the CSS tag in the next step, your style sheets will be able to understand what’s supposed to display as headers for each column in the table, and what is the body or cell content.

Step 2: Add a custom tag to your CSS

Next, we’re going to use a snippet of custom CSS code and the WordPress Twenty Nineteen theme. This theme has a pretty responsive design as part of its native code, but our CSS adjustments will take that even further. 

Since all themes are different, you’ll want to thoroughly understand your theme’s structure in order to successfully implement a responsive table design. Some themes may require an additional JavaScript library.

For our example, we’ll navigate to Appearance > Customize > Additional CSS, where we can add the following custom CSS code: 

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

Once you paste your own code into the editor, you will need to select Publish for your changes to take effect. 

Step 3: Test the table’s responsiveness in WordPress

WordPress has a helpful built-in screen test feature that enables you to test your content on three different screen sizes. At the bottom of the screen where you added your custom CSS, you can click on the tablet or mobile phone icons to test out your table’s new style:

For this example, we’ve already created a simple table that contains all the necessary HTML attributes to work with our CSS. Our breakpoint in the CSS is set to 600px, but that can be changed to fit your needs.

Instead of adding a scrollbar or squishing the table’s data, the CSS we added reorganizes the data into a mobile-friendly format. This enables the user on a mobile device to scroll vertically, and view the table’s data in context with the rest of the related cells. 

How to make a responsive table with a plugin

If you’re not comfortable customizing your theme’s code or CSS, there is another option. There are a number of WordPress plugins available that can help you create a responsive table design for your website. 

Step 1: Download a plugin

To get started, you’ll need to choose a plugin. Since there are quite a few options for designing responsive tables, we’re going to highlight two of them to get you started: 

• Ninja Tables: Labeled as WordPress’ number-one plugin for building responsive tables, it comes with over 100 table styles to choose from. 
• wpDataTables: This is a free plugin with a premium version, but the lite version is packed with features for creating rich and interactive tables and charts. 

For the rest of this example, we’ll use Ninja Tables to demonstrate how to create a responsive data table in WordPress. 

Step 2: Input your data

After installing and activating the plugin, you’ll be able to jump right into creating a table. You can navigate to NinjaTables > All Tables > Add Table: 

Here you can add a new table from scratch, or you can Import Table from a file. We’re going to create a table from scratch with the Add Table option. You’ll then need to enter a title and description for your table: 

You’ll have some other options here as well. For example, if you’re setting up a WooCommerce shop, you’ll be able to use that information to create a WooCommerce table.

Once you add your information, you’ll click on Add to create the table. You’ll then need to start inputting data. You can select Add Column to set up your table’s structure: 

You’ll have a few fields to complete in order to create your column. This includes the column’s header name and the type of data it contains. You’ll also be able to set its Responsive Breakpoint: 

To choose from a number of options that determine how your tables will respond to different devices, you can access the menu by clicking on Always show in all devices: 

Once you’ve built your columns, select Add Data, and NinjaTables will provide an easy form for you to add multiple entries into the table quickly: 

You can leave the Continue Adding option checked if you have multiple entries to make. Once you’re done, you can close the window and return to your table editing screen. 

Step 3: Format your table

Now that you have a table with information in it, you can explore NinjaTable’s settings and style options. From within your table editing window, you can access more settings along the top tabs, and also down the right-hand side of the screen:  

You’ll have many options for customizing your table’s style and appearance, including alternating table row colors, centering text, hiding data, and more.

Step 4: Test your table

NinjaTable makes it easy to test the responsiveness of your table while you’re editing it. In the Table Design tab, you’ll find three options for testing screen responsiveness: 

You can select Desktop, Tablet, or Mobile to view what your table would look like on those kinds of devices.

Each table you create also comes with a shortcode. Plus, you can easily add any of your tables to your website’s content by using the NinjaTable block you’ll find in the Formatting section of the Block Editor menu. 

Let WP Engine help you keep your site responsive

Building a website that employs solid responsive design doesn’t have to be a challenge when you have access to the right resources.

Here at WP Engine, we want you to be able to provide the best digital experience to your customers. Find out more about our industry leading hosting for WordPress sites, our flexible plans, and our powerful developer solutions for your next project!