Make your tables look good on different screen sizes.
This feature module is part of the TablePress Premium plans.
Tables on websites 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 mobile phones and tablets, where a table might be cut-off on the right side or extend into the sidebar, as in this example:
Last Name | First Name | Birthday | Company | Phone (Ext.) | 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 | 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 |
Lott | Lillith | 12/10/1978 | Dell | 587-2289 | 88178 | Australia | $30.12 | 1 | 7.9 |
Freeman | Cheyenne | 01/28/1981 | LG | 396-5473 | 14711 | Germany | $49.82 | 1 | 6.0 |
Houston | Jorden | 05/03/1978 | Adobe | 970-1182 | 96036 | Canada | $47.31 | 2 | 1.5 |
Harris | Merritt | 12/29/1989 | Apple | 160-5977 | 25178 | United States | $77.33 | 6 | 0.1 |
Gregory | Brynn | 01/13/1994 | Adobe | 663-6039 | 91558 | Spain | $90.24 | 9 | 8.2 |
Curry | Mason | 03/15/1969 | Sony | 115-4778 | 87513 | Australia | $21.68 | 5 | 6.6 |
Holland | Alyssa | 06/25/1976 | Xerox | 704-4977 | 97921 | Canada | $50.31 | 7 | 9.5 |
Logan | Shay | 09/13/1968 | IBM | 687-6482 | 03023 | United States | $46.39 | 8 | 7.6 |
Moran | August | 07/04/1986 | Cisco | 651-1214 | 60737 | India | $22.64 | 1 | 7.5 |
Vasquez | Kelsey | 03/31/1968 | Samsung | 470-7358 | 79655 | Germany | $84.05 | 3 | 4.5 |
Stein | Lawrence | 10/15/1960 | Toshiba | 929-5407 | 36044 | Italy | $77.11 | 2 | 8.6 |
Battle | Wylie | 01/03/1988 | 368-2276 | 37585 | Australia | $46.37 | 10 | 2.8 | |
Booker | Logan | 12/16/1975 | Apple | 830-5701 | 22074 | United States | $40.71 | 1 | 9.0 |
Gilbert | Chaney | 06/06/1970 | Sony | 132-5560 | 89630 | Canada | $78.45 | 9 | 1.2 |
Buckley | Stone | 09/11/1980 | Cisco | 422-7998 | 74057 | United States | $30.01 | 2 | 7.9 |
Approaches for responsiveness
The Responsive Tables module offers four approaches to get around this challenge:
- Scroll: 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.
- 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 adds 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 two columns: One for the header cells and one for the original row’s data cells.
- Flip: 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.
For all modes, filtering and pagination will continue to work. Sorting will be possible for all modes except the Stack mode.
Here are examples for the four modes:
Scroll mode
The table can be scrolled horizontally, so that the otherwise cut-off data can be reached.
Last Name | First Name | Birthday | Company | Phone (Ext.) | 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 | 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 |
Lott | Lillith | 12/10/1978 | Dell | 587-2289 | 88178 | Australia | $30.12 | 1 | 7.9 |
Freeman | Cheyenne | 01/28/1981 | LG | 396-5473 | 14711 | Germany | $49.82 | 1 | 6.0 |
Houston | Jorden | 05/03/1978 | Adobe | 970-1182 | 96036 | Canada | $47.31 | 2 | 1.5 |
Harris | Merritt | 12/29/1989 | Apple | 160-5977 | 25178 | United States | $77.33 | 6 | 0.1 |
Gregory | Brynn | 01/13/1994 | Adobe | 663-6039 | 91558 | Spain | $90.24 | 9 | 8.2 |
Curry | Mason | 03/15/1969 | Sony | 115-4778 | 87513 | Australia | $21.68 | 5 | 6.6 |
Holland | Alyssa | 06/25/1976 | Xerox | 704-4977 | 97921 | Canada | $50.31 | 7 | 9.5 |
Logan | Shay | 09/13/1968 | IBM | 687-6482 | 03023 | United States | $46.39 | 8 | 7.6 |
Moran | August | 07/04/1986 | Cisco | 651-1214 | 60737 | India | $22.64 | 1 | 7.5 |
Vasquez | Kelsey | 03/31/1968 | Samsung | 470-7358 | 79655 | Germany | $84.05 | 3 | 4.5 |
Stein | Lawrence | 10/15/1960 | Toshiba | 929-5407 | 36044 | Italy | $77.11 | 2 | 8.6 |
Battle | Wylie | 01/03/1988 | 368-2276 | 37585 | Australia | $46.37 | 10 | 2.8 | |
Booker | Logan | 12/16/1975 | Apple | 830-5701 | 22074 | United States | $40.71 | 1 | 9.0 |
Gilbert | Chaney | 06/06/1970 | Sony | 132-5560 | 89630 | Canada | $78.45 | 9 | 1.2 |
Buckley | Stone | 09/11/1980 | Cisco | 422-7998 | 74057 | United States | $30.01 | 2 | 7.9 |
Collapse mode
Cut-off columns on the right can be shown/hidden via the “+”/”-” button in each row.
Last Name | First Name | Birthday | Company | Phone (Ext.) | 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 | 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 |
Lott | Lillith | 12/10/1978 | Dell | 587-2289 | 88178 | Australia | $30.12 | 1 | 7.9 |
Freeman | Cheyenne | 01/28/1981 | LG | 396-5473 | 14711 | Germany | $49.82 | 1 | 6.0 |
Houston | Jorden | 05/03/1978 | Adobe | 970-1182 | 96036 | Canada | $47.31 | 2 | 1.5 |
Harris | Merritt | 12/29/1989 | Apple | 160-5977 | 25178 | United States | $77.33 | 6 | 0.1 |
Gregory | Brynn | 01/13/1994 | Adobe | 663-6039 | 91558 | Spain | $90.24 | 9 | 8.2 |
Curry | Mason | 03/15/1969 | Sony | 115-4778 | 87513 | Australia | $21.68 | 5 | 6.6 |
Holland | Alyssa | 06/25/1976 | Xerox | 704-4977 | 97921 | Canada | $50.31 | 7 | 9.5 |
Logan | Shay | 09/13/1968 | IBM | 687-6482 | 03023 | United States | $46.39 | 8 | 7.6 |
Moran | August | 07/04/1986 | Cisco | 651-1214 | 60737 | India | $22.64 | 1 | 7.5 |
Vasquez | Kelsey | 03/31/1968 | Samsung | 470-7358 | 79655 | Germany | $84.05 | 3 | 4.5 |
Stein | Lawrence | 10/15/1960 | Toshiba | 929-5407 | 36044 | Italy | $77.11 | 2 | 8.6 |
Battle | Wylie | 01/03/1988 | 368-2276 | 37585 | Australia | $46.37 | 10 | 2.8 | |
Booker | Logan | 12/16/1975 | Apple | 830-5701 | 22074 | United States | $40.71 | 1 | 9.0 |
Gilbert | Chaney | 06/06/1970 | Sony | 132-5560 | 89630 | Canada | $78.45 | 9 | 1.2 |
Buckley | Stone | 09/11/1980 | Cisco | 422-7998 | 74057 | United States | $30.01 | 2 | 7.9 |
Stack mode
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.
Last Name | First Name | Birthday | Company |
---|---|---|---|
Banks | Travis | 05/04/1969 | Apple |
Cain | Lawrence | 05/16/1994 | IBM |
Middleton | Dennis | 01/10/1992 | |
Valenzuela | Lunea | 01/09/1966 | Cisco |
Burgess | Quynn | 09/24/1988 | Mozilla |
Lott | Lillith | 12/10/1978 | Dell |
Freeman | Cheyenne | 01/28/1981 | LG |
Houston | Jorden | 05/03/1978 | Adobe |
Harris | Merritt | 12/29/1989 | Apple |
Gregory | Brynn | 01/13/1994 | Adobe |
Curry | Mason | 03/15/1969 | Sony |
Holland | Alyssa | 06/25/1976 | Xerox |
Logan | Shay | 09/13/1968 | IBM |
Moran | August | 07/04/1986 | Cisco |
Vasquez | Kelsey | 03/31/1968 | Samsung |
Stein | Lawrence | 10/15/1960 | Toshiba |
Battle | Wylie | 01/03/1988 | |
Booker | Logan | 12/16/1975 | Apple |
Gilbert | Chaney | 06/06/1970 | Sony |
Buckley | Stone | 09/11/1980 | Cisco |
Flip mode
The table is flipped to the side and can be scrolled horizontally.
Last Name | First Name | Birthday | Company | Phone (Ext.) |
---|---|---|---|---|
Banks | Travis | 05/04/1969 | Apple | 200-4324 |
Cain | Lawrence | 05/16/1994 | IBM | 701-3108 |
Middleton | Dennis | 01/10/1992 | 580-9501 | |
Valenzuela | Lunea | 01/09/1966 | Cisco | 970-8655 |
Burgess | Quynn | 09/24/1988 | Mozilla | 430-8943 |
Lott | Lillith | 12/10/1978 | Dell | 587-2289 |
Freeman | Cheyenne | 01/28/1981 | LG | 396-5473 |
Houston | Jorden | 05/03/1978 | Adobe | 970-1182 |
Harris | Merritt | 12/29/1989 | Apple | 160-5977 |
Gregory | Brynn | 01/13/1994 | Adobe | 663-6039 |
Curry | Mason | 03/15/1969 | Sony | 115-4778 |
Holland | Alyssa | 06/25/1976 | Xerox | 704-4977 |
Logan | Shay | 09/13/1968 | IBM | 687-6482 |
Moran | August | 07/04/1986 | Cisco | 651-1214 |
Vasquez | Kelsey | 03/31/1968 | Samsung | 470-7358 |
Stein | Lawrence | 10/15/1960 | Toshiba | 929-5407 |
Battle | Wylie | 01/03/1988 | 368-2276 | |
Booker | Logan | 12/16/1975 | Apple | 830-5701 |
Gilbert | Chaney | 06/06/1970 | Sony | 132-5560 |
Buckley | Stone | 09/11/1980 | Cisco | 422-7998 |
Usage instructions
To use these modes with your tables, choose the desired approach on the table’s “Edit” screen.
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. Possible 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 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.
On this page