Title: Responsive Tables
Author: Tobias Bäthge
Published: November 21, 2022
Last modified: September 18, 2025

---

Great-looking tables on all devices!

# Responsive Tables

Tables on websites can not always adjust to the available space on the screen automatically:
Their content requires a certain minimum space, and that defines the minimum width
of the table. If that minimum table width is bigger than the width of the available
content area or screen, the table will not fit.

Unfortunately, this can lead to ugly behavior on small screens, like on mobile phones
and tablets, where a table might be cut-off on the right side or extend into the
sidebar, as in this example illustration of a table shown on a smartphone.

Besides the ugly design that this causes, this can actually prevent your visitors
from seeming important information in your tables! It’s bad for search engine optimization(
SEO) and accessibility as well.

## Approaches for responsiveness

The Responsive Tables feature module in TablePress Pro and TablePress Max offers
five approaches to solve this challenge:

[Scroll](https://tablepress.org/modules/responsive-tables/?output_format=md#scroll-mode)

[Collapse](https://tablepress.org/modules/responsive-tables/?output_format=md#collapse-mode)

[Modal](https://tablepress.org/modules/responsive-tables/?output_format=md#modal-mode)

[Stack](https://tablepress.org/modules/responsive-tables/?output_format=md#stack-mode)

[Flip](https://tablepress.org/modules/responsive-tables/?output_format=md#flip-mode)

For all modes, features like searching and pagination will continue to work. Sorting
will be possible for all modes except the _Stack_ mode.

[Make your tables responsive today!](https://tablepress.org/pricing/?output_format=md)

Here are examples for the five modes:

### **Scroll** mode

This mode will 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.

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

For the **Scroll** mode, it is also possible to show left/right arrow buttons on
the left and right sides of the table, to indicate that a table can be scrolled 
horizontally, in addition to swiping.

**And the cool thing**: These buttons are only shown when a table can be scrolled
horizontally. They stick to the page so that they are always visible, which makes
them very helpful for long tables.

Using the [Fixed Rows and Columns feature module](https://tablepress.org/modules/datatables-fixedheader-fixedcolumns/),
it is also possible to keep columns fixed to the edge of the screen.

This way, it’s always clear, what data is being shown in each row.

### **Collapse** mode

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 adds that data
to a collapsible 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.

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

By the way: Changing the colors for the “+” and “-” buttons in the first column 
is very easy with the [Default Style Customizer](https://tablepress.org/modules/default-style-customizer/)
feature module!

The “Collapse” mode also works well on bigger screens and can be used to make data
available that maybe doesn’t have to be visible on first glance, but offers valuable
details. For that, it’s also possible to [configure which columns are collapsed when the page is loaded](https://tablepress.org/tutorials/collapse-expand-columns/).
The following demo table is configured to collapse all but four columns:

  |  Last Name | First Name | Birthday | Company | Phone | ZIP code | Country | Balance | Points | Rating |  
   |  Banks | Travis | 05/04/1969 | Apple | 200-4324 | 64655 | Italy | $61.17 | 8 | 6.6 |  
 |  Cain | Lawrence | 05/16/1994 | IBM | 701-3108 | 98004 | United States | $54.81 | 5 | 2.5 |  
 |  Middleton | Dennis | 01/10/1992 | Google | 580-9501 | 80913 | Spain | $24.83 | 4 | 5.2 |  
 |  Valenzuela | Lunea | 01/09/1966 | Cisco | 970-8655 | 51606 | Germany | $74.07 | 7 | 3.7 |  
 |  Burgess | Quynn | 09/24/1988 | Mozilla | 430-8943 | 78965 | France | $16.13 | 8 | 2.9 |

### **Modal** mode

Similar to the _Collapse_ mode, the Modal mode will only show columns that fit on
the screen. The other data is then shown in a modal overlay when a row is clicked.

Columns that don’t fit on the screen will be shown in a modal window, also called
overlay or popup, when the “+” button of a row is clicked.

By the way: Changing the colors for the “+” and “-” buttons in the first column 
is very easy with the [Default Style Customizer](https://tablepress.org/modules/default-style-customizer/)
feature module!

The “Modal” mode can also be used to make data available in a modal overlay, e.g.
details for an table entry. It’s also possible to [configure which columns are hidden when the page is loaded](https://tablepress.org/tutorials/collapse-expand-columns/).
The following demo table is configured show four columns, but will reveal all information
after clicking the “+” button:

  |  Last Name | First Name | Birthday | Company | Phone | ZIP code | Country | Balance | Points | Rating |  
   |  Banks | Travis | 05/04/1969 | Apple | 200-4324 | 64655 | Italy | $61.17 | 8 | 6.6 |  
 |  Cain | Lawrence | 05/16/1994 | IBM | 701-3108 | 98004 | United States | $54.81 | 5 | 2.5 |  
 |  Middleton | Dennis | 01/10/1992 | Google | 580-9501 | 80913 | Spain | $24.83 | 4 | 5.2 |  
 |  Valenzuela | Lunea | 01/09/1966 | Cisco | 970-8655 | 51606 | Germany | $74.07 | 7 | 3.7 |  
 |  Burgess | Quynn | 09/24/1988 | Mozilla | 430-8943 | 78965 | France | $16.13 | 8 | 2.9 |

### **Stack** mode

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 
two columns: One for the header cells and one for the original row’s data cells.

The table rows are shown as columns, so that the table is more narrow and appears
to have only two columns — one for the header cells and one for the data cells. 
This will work nicely on small screens, but might need a lot of vertical scrolling
in large tables.

### **Flip** mode

This mode changes the layout of the table, by flipping it to the side (rows appear
as columns and vice versa), and then makes the table horizontally scrollable. This
mode is a good solution for plain data tables, but will usually not work nicely 
in tables with images, cells of different height, or with combined/merged cells.

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

## Usage instructions

To use these features with your tables, activate the “Responsive Tables” feature
module on the “Modules” screen of TablePress Pro or TablePress Max. Then, configure
the desired options in the “Behavior on different screen sizes (Responsiveness)”
section on the table’s “Edit” screen, by choosing the desired more for responsiveness.

![Screenshot of the "Responsive Tables" configuration section in the TablePress 
Premium versions.](https://tablepress.org/wp-content/uploads/2024/11/responsive-
tables.png)

The “Responsive Tables” configuration section in the TablePress Premium versions.

For the _Flip_ and _Stack_ modes, you can then also choose the biggest screen size,
called _breakpoint_, for which you want to use the responsiveness mode instead of
the original table view. Available breakpoints are _Phone_, _Tablet_, _Desktop_,
and _All_, 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 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.

For the _Scroll_ mode, you can also choose whether to show left/right arrow buttons,
to indicate that the table can be scrolled horizontally.

## Configuration parameters

To configure this module’s features, you can also use these [configuration parameters](https://tablepress.org/faq/configuration-parameter-reference/)
in the “TablePress Table” [block](https://tablepress.org/faq/documentation-tablepress-table-block/),
the Elementor widget, or in the [Shortcode](https://tablepress.org/faq/documentation-shortcode-table/)
that you are using to embed the table:

  |  Module | Slug |  | Configuration parameter | Name | Description | Type | Default value |  
   |  Responsive Tables | responsive-tables |  | responsive | Mode for Responsiveness | The desired behavior of the table on small screens. | enum (`""` (empty string), `scroll`, `collapsemodal`, `stack`, or `flip`) | `""` (empty string) |  
 |  Responsive Tables | responsive-tables |  | responsive_breakpoint | Breakpoint for the Mode of Responsiveness | The largest screen size (breakpoint) for which the Flip or Stack mode should be used. | enum (`phone`, `tablet`, `desktop`, or `all`) | `phone` |  
 |  Responsive Tables | responsive-tables |  | responsive_scroll_buttons | Horizontal Scroll Buttons | Whether to show left/right buttons for the horizontal scrolling. | boolean (`true` or `false`) | `false` |

The “Responsive Tables” feature module is part of the [**TablePress Premium plans**](https://tablepress.org/pricing/?output_format=md).

**On this page**

 1. [Approaches for responsiveness](https://tablepress.org/modules/responsive-tables/#approaches)
 2.  a. [Scroll mode](https://tablepress.org/modules/responsive-tables/#scroll-mode)
     b. [Collapse mode](https://tablepress.org/modules/responsive-tables/#collapse-mode)
     c. [Modal mode](https://tablepress.org/modules/responsive-tables/#modal-mode)
     d. [Stack mode](https://tablepress.org/modules/responsive-tables/#stack-mode)
     e. [Flip mode](https://tablepress.org/modules/responsive-tables/#flip-mode)
 3. [Usage instructions](https://tablepress.org/modules/responsive-tables/#instructions)
 4. [Configuration parameters](https://tablepress.org/modules/responsive-tables/#configuration)