Due to how tables on the web work technically, they can’t always adjust to the available space on the screen automatically. The reason is that their content requires a certain minimum space, and that’s what defines the minimum width of the table. If that minimum table width is bigger than the width of the intended content area, the table will not fit. Unfortunately, this can lead to ugly behavior on small screens, like on phones and tablets, where then not everything of a table is visible and the table appears to be cut-off.

The Responsive Tables Extension offers three approaches or view modes to work around this:

• flip: In this mode, the Extension will change the layout of the table, by flipping it to the side (rows appear as columns and vice versa) and by making it horizontally scrollable. This mode is a good solution for plain data/text tables, but will usually not work nicely in tables with images.
• scroll: This mode will simply make a table that is too wide to be fully displayed horizontally scrollable. With that, the user can still reach all table data. This is usually a good approach for tables with images, if they don’t automatically resize.
• collapse: The collapse approach can add a hide/expand effect to a table. It will hide the data from those columns that would otherwise be cut-off and instead add that data to a collapsable row that is inserted below each entry. That row can be shown and hidden with a “+” and “-” button. This mode is especially useful in tables that show additional information for some “main” columns, e.g. in a directory table.

And what’s really nice: In all three modes, sorting, filtering, and pagination will continue to work!

Here are examples for the three modes:

Regular table, default behavior without responsiveness enabled:

This table will likely be cut-off on the right side, which shows why an approach for responsiveness is needed.

Responsive table with the flip mode:

The table is flipped to the side and can be scrolled horizontally.

Responsive table with the scroll mode:

The table can be scrolled horizontally, so that the otherwise cut-off data can be reached.

Responsive table with the collapse mode:

Cut-off columns on the right can be shown/hidden via the “+”/”-” button in each row.

Usage instructions:

To use these modes with your tables, download, install, and activate the Extension like a regular WordPress plugin. Then, change your table’s Shortcode from something like

[table id=123 /]

to

[table id=123 responsive=mode /]

where mode is one of the three values flip, scroll, or collapse, depending on which mode you want for the table.

The flip mode (but not the others!) can be further customized, by adding another parameter that defines for which screen sizes the table should be flipped:

[table id=123 responsive=flip responsive_breakpoint=device /]

Here, device can be chosen from phone, tablet, desktop, and all. That sets the biggest screen size for which the flip mode shall be used, according to this list:

• phone: The flip mode is used only on phones (devices with a screen width smaller than 768 pixels)
• tablet: The flip mode is used on phones and tablets (devices with a screen width smaller than 980 pixels)
• desktop: The flip mode is used on phones, tablets, and medium-sized desktop monitors (devices with a screen width smaller than 1200 pixels)
• all: The flip mode is used on all screens, regardless of their screen size