Responsive Tables – TablePress

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	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
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	Facebook	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	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
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	Facebook	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	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
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	Facebook	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	Google
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	Facebook
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	Google	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	Facebook	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