How to create responsive tables in the WordPress admin

Tobias Schutter
Feb 26, 2020 | Blog » Tutorials

The list table in the WordPress admin usually works best when they have fixed sizes. But that means they will look very bad on different screen sizes. How can you make sure that list tables will work on all screen size and make them more responsive?

More Columns, More Problems

When you add more and more columns to your WordPress list table, you might run out of space on your screen. It becomes a trade-off between making your content more readable and leaving out certain columns. In this post we’ll show you the benefits of having responsive tables for your WordPress admin.

Let’s have a look at this example of a list table with columns optimized for a specific screen size.

Example of and optimized column set for large desktop without responsive tables
Example of an optimized column set for large desktop

When looking at the same column set on a smaller screen, it will look something like this:

Example of column set with optimized column width for a large screen

It’s easy to spot the problem here. The table and its columns are not responsive and some columns are too small to contain the content on a single line.

Different screen sizes

There are also different screen sizes to consider. A laptop screen can have a smaller size screen than a desktop computer. If you have multiple users that manage content within WordPress, there is a big chance they each have a different screen size.

Enable Responsive Tables

But how can content remain manageable in the WordPress Admin even with many columns and different screen sizes? After all, the main benefit of Admin Columns is to manage content in one clear overview.  The answer is to enable responsive tables. The new release of Admin Columns Pro 5.0 contains horizontal scrolling that keeps tables intact and enables a clear Admin overview, regardless of the number of columns or different screen sizes. Read more about horizontal scrolling.

Intuitive solution

The intuitive horizontal scrolling feature functions naturally and easily. Just use the horizontal scrolling bar below the screen or your mouse with a horizontal scrolling option.

All content in one perfect overview

Do you want to be able to manage all your WordPress content in one perfect overview also? Get your Admin Column Pro now!
Read about other features.