Due to how tables on websites work technically, they can not 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 available content area, the table will not fit. Unfortunately, this can lead to ugly behavior on small screens, like on phones and tablets, where some parts of a table might then be cut-off on the right side, as in this example:

Four approaches for responsiveness

The Responsive Tables Extension offers four approaches 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.
• stack: The stack mode will show the cells of a row on top of each other, instead of next to each other. This makes the table more narrow, as it will appear to have only one column. However, as the column header cells from the table head row will not be visible, this approach is suited best for text data for which its easily recognizable what the information is about, e.g. in a directory table.

And what’s really nice: In the first three modes, sorting, filtering, and pagination will continue to work! For the stack mode, sorting will not be possible.

Here are examples for the four modes:

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, but is not flipped as above, 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.

Responsive table with the stack mode:

The table rows are shown as columns, so that the table is more narrow and appears to have only one column. This will work nicely on small screens, but will require a lot of vertical scrolling in large tables.

Usage instructions

To use these modes with your tables, download, install, and activate the Extension like a regular WordPress plugin. Then, on the page where you are showing your table, adjust your table’s Shortcode from something like

[table id=123 /]

to

[table id=123 responsive=mode /]

where mode is one of the four values flip, scroll, collapse, or stack, depending on which of the above mode you want to use with the table.

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

For the flip mode:

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

For the stack mode:

[table id=123 responsive=stack responsive_breakpoint=phone /]

Here, the value of theresponsive_breakpoint parameter (possible values are phone, tablet, desktop, and all) sets the biggest screen size for which the flip or stack mode shall be used, according to this list:

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