Responsive Tables

Make your tables look good on different screen sizes.

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

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.
  • Modal: 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 window when a row is clicked.
  • 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 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

New feature! 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. And then, they stick to the page so that they are always visible, which makes them very helpful for long tables.

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

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

New feature! 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.

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

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

Flip mode

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

Last NameFirst NameBirthdayCompanyPhone (Ext.)
BanksTravis05/04/1969Apple200-4324
CainLawrence05/16/1994IBM701-3108
MiddletonDennis01/10/1992Google580-9501
ValenzuelaLunea01/09/1966Cisco970-8655
BurgessQuynn09/24/1988Mozilla430-8943
LottLillith12/10/1978Dell587-2289
FreemanCheyenne01/28/1981LG396-5473
HoustonJorden05/03/1978Adobe970-1182
HarrisMerritt12/29/1989Apple160-5977
GregoryBrynn01/13/1994Adobe663-6039
CurryMason03/15/1969Sony115-4778
HollandAlyssa06/25/1976Xerox704-4977
LoganShay09/13/1968IBM687-6482
MoranAugust07/04/1986Cisco651-1214
VasquezKelsey03/31/1968Samsung470-7358
SteinLawrence10/15/1960Toshiba929-5407
BattleWylie01/03/1988Facebook368-2276
BookerLogan12/16/1975Apple830-5701
GilbertChaney06/06/1970Sony132-5560
BuckleyStone09/11/1980Cisco422-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.

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

window.addEventListener(‘DOMContentLoaded’,()=>{const o=new IntersectionObserver(d=>{d.forEach(e=>{const id=e.target.getAttribute(‘id’).slice(8);document.querySelector(`.wp-block-table-of-contents li a[href$=”#${id}”]`)?.parentElement.classList.toggle(‘active’,e.intersectionRatio>0);});});document.querySelectorAll(‘section[id]’).forEach(s=>{o.observe(s);});});