Responsive Tables

This is a Premium Extension for TablePress.
Support and development takes a lot of work. To allow me to offer Extensions in the future, please consider a donation. The recommended amount is $12. Thank you.

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:

Last NameFirst NameBirthdayCompanyPhone (Ext.)ZIP codeCountryBalancePointsRating
BanksTravis05/04/1969Apple200-432464655Italy$61.1786.6
CainLawrence05/16/1994IBM701-310898004United States$54.8152.5
MiddletonDennis01/10/1992Google580-950180913Spain$24.8345.2
ValenzuelaLunea01/09/1966Cisco970-865551606Germany$74.0773.7
BurgessQuynn09/24/1988Mozilla430-894378965France$16.1382.9
LottLillith12/10/1978Dell587-228988178Australia$30.1217.9
FreemanCheyenne01/28/1981LG396-547314711Germany$49.8216.0
HoustonJorden05/03/1978Adobe970-118296036Canada$47.3121.5
HarrisMerritt12/29/1989Apple160-597725178United States$77.3360.1
GregoryBrynn01/13/1994Adobe663-603991558Spain$90.2498.2
CurryMason03/15/1969Sony115-477887513Australia$21.6856.6
HollandAlyssa06/25/1976Xerox704-497797921Canada$50.3179.5
LoganShay09/13/1968IBM687-648203023United States$46.3987.6
MoranAugust07/04/1986Cisco651-121460737India$22.6417.5
VasquezKelsey03/31/1968Samsung470-735879655Germany$84.0534.5
SteinLawrence10/15/1960Toshiba929-540736044Italy$77.1128.6
BattleWylie01/03/1988Facebook368-227637585Australia$46.37102.8
BookerLogan12/16/1975Apple830-570122074United States$40.7119.0
GilbertChaney06/06/1970Sony132-556089630Canada$78.4591.2
BuckleyStone09/11/1980Cisco422-799874057United States$30.0127.9
FoxDiana12/08/1991Samsung372-995336220Germany$76.3392.8
HuffChastity11/14/1995Samsung637-460798499United States$82.7974.7
PetersLuke06/30/1991Mozilla853-315636833Australia$86.4078.8
NewmanCally06/21/1975Cisco294-602397885Brazil$61.6074.1
DunnDaryl10/20/1976Amazon362-362201123Canada$10.2794.0
HarrisonCamilla12/15/1982Cisco213-265240981Canada$67.5476.0
RobinsonFinn08/18/1996Yahoo990-011360390Canada$37.1519.0
FlemingIdona03/04/1987Adobe202-872662236Germany$13.8665.2
JoyceJerry09/27/1979Sony676-641873478Italy$90.0349.3
PaceZachary04/18/1983Cisco659-734226046France$85.3653.4
HolderTimothy05/03/1975Facebook223-723589294Brazil$71.2013.7
WhitfieldBrandon09/16/1968Xerox728-065343371Australia$67.4443.9
CampbellGiselle03/14/1963Facebook955-671669820India$20.08103.3
VelazquezChancellor03/07/1995Microsoft554-551561027Brazil$77.7929.8
ParkColby03/16/1960Amazon966-776575336United States$17.8326.4
HallCaryn07/24/1970Google985-483207161Germany$3.3610.5
FaulknerLesley12/19/1984Yahoo506-711901828Italy$23.7188.3
BlackwellNoah12/22/1968Facebook177-126345315Australia$52.4925.6
SlaterGuinevere02/21/1985Cisco463-721996393Germany$93.9130.1
ForemanVictor01/19/1982Amazon469-727065387India$39.3214.9
YangAlthea06/27/1968Twitter650-956394636Canada$53.0829.9
NortonImelda02/03/1975Samsung939-707881130Spain$58.2295.7
CraneMegan06/01/1981Oracle505-345390892India$74.6876.4
TerrellSopoline11/24/1973Intel667-013753848Spain$19.1461.4
StaffordEdward09/26/1990Cisco951-577602123Brazil$83.4192.4
MarshJakeem07/03/1996LG571-022210186Brazil$44.35101.0
HaynesChaim05/19/1995Sony635-957257149India$24.7568.9
MullinsHilary02/13/1996Xerox750-533925841India$54.1021.8
AshleyLenore08/07/1980Yahoo668-187719220France$70.5558.2
FrostDakota02/23/1965Samsung839-168812995France$40.8587.0


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.

Last NameFirst NameBirthdayCompanyPhone (Ext.)ZIP codeCountryBalancePointsRating
BanksTravis05/04/1969Apple200-432464655Italy$61.1786.6
CainLawrence05/16/1994IBM701-310898004United States$54.8152.5
MiddletonDennis01/10/1992Google580-950180913Spain$24.8345.2
ValenzuelaLunea01/09/1966Cisco970-865551606Germany$74.0773.7
BurgessQuynn09/24/1988Mozilla430-894378965France$16.1382.9
LottLillith12/10/1978Dell587-228988178Australia$30.1217.9
FreemanCheyenne01/28/1981LG396-547314711Germany$49.8216.0
HoustonJorden05/03/1978Adobe970-118296036Canada$47.3121.5
HarrisMerritt12/29/1989Apple160-597725178United States$77.3360.1
GregoryBrynn01/13/1994Adobe663-603991558Spain$90.2498.2
CurryMason03/15/1969Sony115-477887513Australia$21.6856.6
HollandAlyssa06/25/1976Xerox704-497797921Canada$50.3179.5
LoganShay09/13/1968IBM687-648203023United States$46.3987.6
MoranAugust07/04/1986Cisco651-121460737India$22.6417.5
VasquezKelsey03/31/1968Samsung470-735879655Germany$84.0534.5
SteinLawrence10/15/1960Toshiba929-540736044Italy$77.1128.6
BattleWylie01/03/1988Facebook368-227637585Australia$46.37102.8
BookerLogan12/16/1975Apple830-570122074United States$40.7119.0
GilbertChaney06/06/1970Sony132-556089630Canada$78.4591.2
BuckleyStone09/11/1980Cisco422-799874057United States$30.0127.9
FoxDiana12/08/1991Samsung372-995336220Germany$76.3392.8
HuffChastity11/14/1995Samsung637-460798499United States$82.7974.7
PetersLuke06/30/1991Mozilla853-315636833Australia$86.4078.8
NewmanCally06/21/1975Cisco294-602397885Brazil$61.6074.1
DunnDaryl10/20/1976Amazon362-362201123Canada$10.2794.0
HarrisonCamilla12/15/1982Cisco213-265240981Canada$67.5476.0
RobinsonFinn08/18/1996Yahoo990-011360390Canada$37.1519.0
FlemingIdona03/04/1987Adobe202-872662236Germany$13.8665.2
JoyceJerry09/27/1979Sony676-641873478Italy$90.0349.3
PaceZachary04/18/1983Cisco659-734226046France$85.3653.4
HolderTimothy05/03/1975Facebook223-723589294Brazil$71.2013.7
WhitfieldBrandon09/16/1968Xerox728-065343371Australia$67.4443.9
CampbellGiselle03/14/1963Facebook955-671669820India$20.08103.3
VelazquezChancellor03/07/1995Microsoft554-551561027Brazil$77.7929.8
ParkColby03/16/1960Amazon966-776575336United States$17.8326.4
HallCaryn07/24/1970Google985-483207161Germany$3.3610.5
FaulknerLesley12/19/1984Yahoo506-711901828Italy$23.7188.3
BlackwellNoah12/22/1968Facebook177-126345315Australia$52.4925.6
SlaterGuinevere02/21/1985Cisco463-721996393Germany$93.9130.1
ForemanVictor01/19/1982Amazon469-727065387India$39.3214.9
YangAlthea06/27/1968Twitter650-956394636Canada$53.0829.9
NortonImelda02/03/1975Samsung939-707881130Spain$58.2295.7
CraneMegan06/01/1981Oracle505-345390892India$74.6876.4
TerrellSopoline11/24/1973Intel667-013753848Spain$19.1461.4
StaffordEdward09/26/1990Cisco951-577602123Brazil$83.4192.4
MarshJakeem07/03/1996LG571-022210186Brazil$44.35101.0
HaynesChaim05/19/1995Sony635-957257149India$24.7568.9
MullinsHilary02/13/1996Xerox750-533925841India$54.1021.8
AshleyLenore08/07/1980Yahoo668-187719220France$70.5558.2
FrostDakota02/23/1965Samsung839-168812995France$40.8587.0


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.

Last NameFirst NameBirthdayCompanyPhone (Ext.)ZIP codeCountryBalancePointsRating
BanksTravis05/04/1969Apple200-432464655Italy$61.1786.6
CainLawrence05/16/1994IBM701-310898004United States$54.8152.5
MiddletonDennis01/10/1992Google580-950180913Spain$24.8345.2
ValenzuelaLunea01/09/1966Cisco970-865551606Germany$74.0773.7
BurgessQuynn09/24/1988Mozilla430-894378965France$16.1382.9
LottLillith12/10/1978Dell587-228988178Australia$30.1217.9
FreemanCheyenne01/28/1981LG396-547314711Germany$49.8216.0
HoustonJorden05/03/1978Adobe970-118296036Canada$47.3121.5
HarrisMerritt12/29/1989Apple160-597725178United States$77.3360.1
GregoryBrynn01/13/1994Adobe663-603991558Spain$90.2498.2
CurryMason03/15/1969Sony115-477887513Australia$21.6856.6
HollandAlyssa06/25/1976Xerox704-497797921Canada$50.3179.5
LoganShay09/13/1968IBM687-648203023United States$46.3987.6
MoranAugust07/04/1986Cisco651-121460737India$22.6417.5
VasquezKelsey03/31/1968Samsung470-735879655Germany$84.0534.5
SteinLawrence10/15/1960Toshiba929-540736044Italy$77.1128.6
BattleWylie01/03/1988Facebook368-227637585Australia$46.37102.8
BookerLogan12/16/1975Apple830-570122074United States$40.7119.0
GilbertChaney06/06/1970Sony132-556089630Canada$78.4591.2
BuckleyStone09/11/1980Cisco422-799874057United States$30.0127.9
FoxDiana12/08/1991Samsung372-995336220Germany$76.3392.8
HuffChastity11/14/1995Samsung637-460798499United States$82.7974.7
PetersLuke06/30/1991Mozilla853-315636833Australia$86.4078.8
NewmanCally06/21/1975Cisco294-602397885Brazil$61.6074.1
DunnDaryl10/20/1976Amazon362-362201123Canada$10.2794.0
HarrisonCamilla12/15/1982Cisco213-265240981Canada$67.5476.0
RobinsonFinn08/18/1996Yahoo990-011360390Canada$37.1519.0
FlemingIdona03/04/1987Adobe202-872662236Germany$13.8665.2
JoyceJerry09/27/1979Sony676-641873478Italy$90.0349.3
PaceZachary04/18/1983Cisco659-734226046France$85.3653.4
HolderTimothy05/03/1975Facebook223-723589294Brazil$71.2013.7
WhitfieldBrandon09/16/1968Xerox728-065343371Australia$67.4443.9
CampbellGiselle03/14/1963Facebook955-671669820India$20.08103.3
VelazquezChancellor03/07/1995Microsoft554-551561027Brazil$77.7929.8
ParkColby03/16/1960Amazon966-776575336United States$17.8326.4
HallCaryn07/24/1970Google985-483207161Germany$3.3610.5
FaulknerLesley12/19/1984Yahoo506-711901828Italy$23.7188.3
BlackwellNoah12/22/1968Facebook177-126345315Australia$52.4925.6
SlaterGuinevere02/21/1985Cisco463-721996393Germany$93.9130.1
ForemanVictor01/19/1982Amazon469-727065387India$39.3214.9
YangAlthea06/27/1968Twitter650-956394636Canada$53.0829.9
NortonImelda02/03/1975Samsung939-707881130Spain$58.2295.7
CraneMegan06/01/1981Oracle505-345390892India$74.6876.4
TerrellSopoline11/24/1973Intel667-013753848Spain$19.1461.4
StaffordEdward09/26/1990Cisco951-577602123Brazil$83.4192.4
MarshJakeem07/03/1996LG571-022210186Brazil$44.35101.0
HaynesChaim05/19/1995Sony635-957257149India$24.7568.9
MullinsHilary02/13/1996Xerox750-533925841India$54.1021.8
AshleyLenore08/07/1980Yahoo668-187719220France$70.5558.2
FrostDakota02/23/1965Samsung839-168812995France$40.8587.0


Responsive table with the collapse mode:

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

Last NameFirst NameBirthdayCompanyPhone (Ext.)ZIP codeCountryBalancePointsRating
BanksTravis05/04/1969Apple200-432464655Italy$61.1786.6
CainLawrence05/16/1994IBM701-310898004United States$54.8152.5
MiddletonDennis01/10/1992Google580-950180913Spain$24.8345.2
ValenzuelaLunea01/09/1966Cisco970-865551606Germany$74.0773.7
BurgessQuynn09/24/1988Mozilla430-894378965France$16.1382.9
LottLillith12/10/1978Dell587-228988178Australia$30.1217.9
FreemanCheyenne01/28/1981LG396-547314711Germany$49.8216.0
HoustonJorden05/03/1978Adobe970-118296036Canada$47.3121.5
HarrisMerritt12/29/1989Apple160-597725178United States$77.3360.1
GregoryBrynn01/13/1994Adobe663-603991558Spain$90.2498.2
CurryMason03/15/1969Sony115-477887513Australia$21.6856.6
HollandAlyssa06/25/1976Xerox704-497797921Canada$50.3179.5
LoganShay09/13/1968IBM687-648203023United States$46.3987.6
MoranAugust07/04/1986Cisco651-121460737India$22.6417.5
VasquezKelsey03/31/1968Samsung470-735879655Germany$84.0534.5
SteinLawrence10/15/1960Toshiba929-540736044Italy$77.1128.6
BattleWylie01/03/1988Facebook368-227637585Australia$46.37102.8
BookerLogan12/16/1975Apple830-570122074United States$40.7119.0
GilbertChaney06/06/1970Sony132-556089630Canada$78.4591.2
BuckleyStone09/11/1980Cisco422-799874057United States$30.0127.9
FoxDiana12/08/1991Samsung372-995336220Germany$76.3392.8
HuffChastity11/14/1995Samsung637-460798499United States$82.7974.7
PetersLuke06/30/1991Mozilla853-315636833Australia$86.4078.8
NewmanCally06/21/1975Cisco294-602397885Brazil$61.6074.1
DunnDaryl10/20/1976Amazon362-362201123Canada$10.2794.0
HarrisonCamilla12/15/1982Cisco213-265240981Canada$67.5476.0
RobinsonFinn08/18/1996Yahoo990-011360390Canada$37.1519.0
FlemingIdona03/04/1987Adobe202-872662236Germany$13.8665.2
JoyceJerry09/27/1979Sony676-641873478Italy$90.0349.3
PaceZachary04/18/1983Cisco659-734226046France$85.3653.4
HolderTimothy05/03/1975Facebook223-723589294Brazil$71.2013.7
WhitfieldBrandon09/16/1968Xerox728-065343371Australia$67.4443.9
CampbellGiselle03/14/1963Facebook955-671669820India$20.08103.3
VelazquezChancellor03/07/1995Microsoft554-551561027Brazil$77.7929.8
ParkColby03/16/1960Amazon966-776575336United States$17.8326.4
HallCaryn07/24/1970Google985-483207161Germany$3.3610.5
FaulknerLesley12/19/1984Yahoo506-711901828Italy$23.7188.3
BlackwellNoah12/22/1968Facebook177-126345315Australia$52.4925.6
SlaterGuinevere02/21/1985Cisco463-721996393Germany$93.9130.1
ForemanVictor01/19/1982Amazon469-727065387India$39.3214.9
YangAlthea06/27/1968Twitter650-956394636Canada$53.0829.9
NortonImelda02/03/1975Samsung939-707881130Spain$58.2295.7
CraneMegan06/01/1981Oracle505-345390892India$74.6876.4
TerrellSopoline11/24/1973Intel667-013753848Spain$19.1461.4
StaffordEdward09/26/1990Cisco951-577602123Brazil$83.4192.4
MarshJakeem07/03/1996LG571-022210186Brazil$44.35101.0
HaynesChaim05/19/1995Sony635-957257149India$24.7568.9
MullinsHilary02/13/1996Xerox750-533925841India$54.1021.8
AshleyLenore08/07/1980Yahoo668-187719220France$70.5558.2
FrostDakota02/23/1965Samsung839-168812995France$40.8587.0


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.

Last NameFirst NameBirthdayCompany
BanksTravis05/04/1969Apple
CainLawrence05/16/1994IBM
MiddletonDennis01/10/1992Google
ValenzuelaLunea01/09/1966Cisco
BurgessQuynn09/24/1988Mozilla
LottLillith12/10/1978Dell
FreemanCheyenne01/28/1981LG
HoustonJorden05/03/1978Adobe
HarrisMerritt12/29/1989Apple
GregoryBrynn01/13/1994Adobe
CurryMason03/15/1969Sony
HollandAlyssa06/25/1976Xerox
LoganShay09/13/1968IBM
MoranAugust07/04/1986Cisco
VasquezKelsey03/31/1968Samsung
SteinLawrence10/15/1960Toshiba
BattleWylie01/03/1988Facebook
BookerLogan12/16/1975Apple
GilbertChaney06/06/1970Sony
BuckleyStone09/11/1980Cisco
FoxDiana12/08/1991Samsung
HuffChastity11/14/1995Samsung
PetersLuke06/30/1991Mozilla
NewmanCally06/21/1975Cisco
DunnDaryl10/20/1976Amazon
HarrisonCamilla12/15/1982Cisco
RobinsonFinn08/18/1996Yahoo
FlemingIdona03/04/1987Adobe
JoyceJerry09/27/1979Sony
PaceZachary04/18/1983Cisco
HolderTimothy05/03/1975Facebook
WhitfieldBrandon09/16/1968Xerox
CampbellGiselle03/14/1963Facebook
VelazquezChancellor03/07/1995Microsoft
ParkColby03/16/1960Amazon
HallCaryn07/24/1970Google
FaulknerLesley12/19/1984Yahoo
BlackwellNoah12/22/1968Facebook
SlaterGuinevere02/21/1985Cisco
ForemanVictor01/19/1982Amazon
YangAlthea06/27/1968Twitter
NortonImelda02/03/1975Samsung
CraneMegan06/01/1981Oracle
TerrellSopoline11/24/1973Intel
StaffordEdward09/26/1990Cisco
MarshJakeem07/03/1996LG
HaynesChaim05/19/1995Sony
MullinsHilary02/13/1996Xerox
AshleyLenore08/07/1980Yahoo
FrostDakota02/23/1965Samsung


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="device" /]

For the stack mode:

[table id=123 responsive=stack responsive_breakpoint="device" /]

Here, device can be chosen from phone, tablet, desktop, and all. That 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
Top