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.
Responsive Tables Extension 1.7
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 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 |
Fox | Diana | 12/08/1991 | Samsung | 372-9953 | 36220 | Germany | $76.33 | 9 | 2.8 |
Huff | Chastity | 11/14/1995 | Samsung | 637-4607 | 98499 | United States | $82.79 | 7 | 4.7 |
Peters | Luke | 06/30/1991 | Mozilla | 853-3156 | 36833 | Australia | $86.40 | 7 | 8.8 |
Newman | Cally | 06/21/1975 | Cisco | 294-6023 | 97885 | Brazil | $61.60 | 7 | 4.1 |
Dunn | Daryl | 10/20/1976 | Amazon | 362-3622 | 01123 | Canada | $10.27 | 9 | 4.0 |
Harrison | Camilla | 12/15/1982 | Cisco | 213-2652 | 40981 | Canada | $67.54 | 7 | 6.0 |
Robinson | Finn | 08/18/1996 | Yahoo | 990-0113 | 60390 | Canada | $37.15 | 1 | 9.0 |
Fleming | Idona | 03/04/1987 | Adobe | 202-8726 | 62236 | Germany | $13.86 | 6 | 5.2 |
Joyce | Jerry | 09/27/1979 | Sony | 676-6418 | 73478 | Italy | $90.03 | 4 | 9.3 |
Pace | Zachary | 04/18/1983 | Cisco | 659-7342 | 26046 | France | $85.36 | 5 | 3.4 |
Holder | Timothy | 05/03/1975 | 223-7235 | 89294 | Brazil | $71.20 | 1 | 3.7 | |
Whitfield | Brandon | 09/16/1968 | Xerox | 728-0653 | 43371 | Australia | $67.44 | 4 | 3.9 |
Campbell | Giselle | 03/14/1963 | 955-6716 | 69820 | India | $20.08 | 10 | 3.3 | |
Velazquez | Chancellor | 03/07/1995 | Microsoft | 554-5515 | 61027 | Brazil | $77.79 | 2 | 9.8 |
Park | Colby | 03/16/1960 | Amazon | 966-7765 | 75336 | United States | $17.83 | 2 | 6.4 |
Hall | Caryn | 07/24/1970 | 985-4832 | 07161 | Germany | $3.36 | 1 | 0.5 | |
Faulkner | Lesley | 12/19/1984 | Yahoo | 506-7119 | 01828 | Italy | $23.71 | 8 | 8.3 |
Blackwell | Noah | 12/22/1968 | 177-1263 | 45315 | Australia | $52.49 | 2 | 5.6 | |
Slater | Guinevere | 02/21/1985 | Cisco | 463-7219 | 96393 | Germany | $93.91 | 3 | 0.1 |
Foreman | Victor | 01/19/1982 | Amazon | 469-7270 | 65387 | India | $39.32 | 1 | 4.9 |
Yang | Althea | 06/27/1968 | 650-9563 | 94636 | Canada | $53.08 | 2 | 9.9 | |
Norton | Imelda | 02/03/1975 | Samsung | 939-7078 | 81130 | Spain | $58.22 | 9 | 5.7 |
Crane | Megan | 06/01/1981 | Oracle | 505-3453 | 90892 | India | $74.68 | 7 | 6.4 |
Terrell | Sopoline | 11/24/1973 | Intel | 667-0137 | 53848 | Spain | $19.14 | 6 | 1.4 |
Stafford | Edward | 09/26/1990 | Cisco | 951-5776 | 02123 | Brazil | $83.41 | 9 | 2.4 |
Marsh | Jakeem | 07/03/1996 | LG | 571-0222 | 10186 | Brazil | $44.35 | 10 | 1.0 |
Haynes | Chaim | 05/19/1995 | Sony | 635-9572 | 57149 | India | $24.75 | 6 | 8.9 |
Mullins | Hilary | 02/13/1996 | Xerox | 750-5339 | 25841 | India | $54.10 | 2 | 1.8 |
Ashley | Lenore | 08/07/1980 | Yahoo | 668-1877 | 19220 | France | $70.55 | 5 | 8.2 |
Frost | Dakota | 02/23/1965 | Samsung | 839-1688 | 12995 | France | $40.85 | 8 | 7.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
: Thecollapse
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
: Thestack
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 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 |
Fox | Diana | 12/08/1991 | Samsung | 372-9953 | 36220 | Germany | $76.33 | 9 | 2.8 |
Huff | Chastity | 11/14/1995 | Samsung | 637-4607 | 98499 | United States | $82.79 | 7 | 4.7 |
Peters | Luke | 06/30/1991 | Mozilla | 853-3156 | 36833 | Australia | $86.40 | 7 | 8.8 |
Newman | Cally | 06/21/1975 | Cisco | 294-6023 | 97885 | Brazil | $61.60 | 7 | 4.1 |
Dunn | Daryl | 10/20/1976 | Amazon | 362-3622 | 01123 | Canada | $10.27 | 9 | 4.0 |
Harrison | Camilla | 12/15/1982 | Cisco | 213-2652 | 40981 | Canada | $67.54 | 7 | 6.0 |
Robinson | Finn | 08/18/1996 | Yahoo | 990-0113 | 60390 | Canada | $37.15 | 1 | 9.0 |
Fleming | Idona | 03/04/1987 | Adobe | 202-8726 | 62236 | Germany | $13.86 | 6 | 5.2 |
Joyce | Jerry | 09/27/1979 | Sony | 676-6418 | 73478 | Italy | $90.03 | 4 | 9.3 |
Pace | Zachary | 04/18/1983 | Cisco | 659-7342 | 26046 | France | $85.36 | 5 | 3.4 |
Holder | Timothy | 05/03/1975 | 223-7235 | 89294 | Brazil | $71.20 | 1 | 3.7 | |
Whitfield | Brandon | 09/16/1968 | Xerox | 728-0653 | 43371 | Australia | $67.44 | 4 | 3.9 |
Campbell | Giselle | 03/14/1963 | 955-6716 | 69820 | India | $20.08 | 10 | 3.3 | |
Velazquez | Chancellor | 03/07/1995 | Microsoft | 554-5515 | 61027 | Brazil | $77.79 | 2 | 9.8 |
Park | Colby | 03/16/1960 | Amazon | 966-7765 | 75336 | United States | $17.83 | 2 | 6.4 |
Hall | Caryn | 07/24/1970 | 985-4832 | 07161 | Germany | $3.36 | 1 | 0.5 | |
Faulkner | Lesley | 12/19/1984 | Yahoo | 506-7119 | 01828 | Italy | $23.71 | 8 | 8.3 |
Blackwell | Noah | 12/22/1968 | 177-1263 | 45315 | Australia | $52.49 | 2 | 5.6 | |
Slater | Guinevere | 02/21/1985 | Cisco | 463-7219 | 96393 | Germany | $93.91 | 3 | 0.1 |
Foreman | Victor | 01/19/1982 | Amazon | 469-7270 | 65387 | India | $39.32 | 1 | 4.9 |
Yang | Althea | 06/27/1968 | 650-9563 | 94636 | Canada | $53.08 | 2 | 9.9 | |
Norton | Imelda | 02/03/1975 | Samsung | 939-7078 | 81130 | Spain | $58.22 | 9 | 5.7 |
Crane | Megan | 06/01/1981 | Oracle | 505-3453 | 90892 | India | $74.68 | 7 | 6.4 |
Terrell | Sopoline | 11/24/1973 | Intel | 667-0137 | 53848 | Spain | $19.14 | 6 | 1.4 |
Stafford | Edward | 09/26/1990 | Cisco | 951-5776 | 02123 | Brazil | $83.41 | 9 | 2.4 |
Marsh | Jakeem | 07/03/1996 | LG | 571-0222 | 10186 | Brazil | $44.35 | 10 | 1.0 |
Haynes | Chaim | 05/19/1995 | Sony | 635-9572 | 57149 | India | $24.75 | 6 | 8.9 |
Mullins | Hilary | 02/13/1996 | Xerox | 750-5339 | 25841 | India | $54.10 | 2 | 1.8 |
Ashley | Lenore | 08/07/1980 | Yahoo | 668-1877 | 19220 | France | $70.55 | 5 | 8.2 |
Frost | Dakota | 02/23/1965 | Samsung | 839-1688 | 12995 | France | $40.85 | 8 | 7.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 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 |
Fox | Diana | 12/08/1991 | Samsung | 372-9953 | 36220 | Germany | $76.33 | 9 | 2.8 |
Huff | Chastity | 11/14/1995 | Samsung | 637-4607 | 98499 | United States | $82.79 | 7 | 4.7 |
Peters | Luke | 06/30/1991 | Mozilla | 853-3156 | 36833 | Australia | $86.40 | 7 | 8.8 |
Newman | Cally | 06/21/1975 | Cisco | 294-6023 | 97885 | Brazil | $61.60 | 7 | 4.1 |
Dunn | Daryl | 10/20/1976 | Amazon | 362-3622 | 01123 | Canada | $10.27 | 9 | 4.0 |
Harrison | Camilla | 12/15/1982 | Cisco | 213-2652 | 40981 | Canada | $67.54 | 7 | 6.0 |
Robinson | Finn | 08/18/1996 | Yahoo | 990-0113 | 60390 | Canada | $37.15 | 1 | 9.0 |
Fleming | Idona | 03/04/1987 | Adobe | 202-8726 | 62236 | Germany | $13.86 | 6 | 5.2 |
Joyce | Jerry | 09/27/1979 | Sony | 676-6418 | 73478 | Italy | $90.03 | 4 | 9.3 |
Pace | Zachary | 04/18/1983 | Cisco | 659-7342 | 26046 | France | $85.36 | 5 | 3.4 |
Holder | Timothy | 05/03/1975 | 223-7235 | 89294 | Brazil | $71.20 | 1 | 3.7 | |
Whitfield | Brandon | 09/16/1968 | Xerox | 728-0653 | 43371 | Australia | $67.44 | 4 | 3.9 |
Campbell | Giselle | 03/14/1963 | 955-6716 | 69820 | India | $20.08 | 10 | 3.3 | |
Velazquez | Chancellor | 03/07/1995 | Microsoft | 554-5515 | 61027 | Brazil | $77.79 | 2 | 9.8 |
Park | Colby | 03/16/1960 | Amazon | 966-7765 | 75336 | United States | $17.83 | 2 | 6.4 |
Hall | Caryn | 07/24/1970 | 985-4832 | 07161 | Germany | $3.36 | 1 | 0.5 | |
Faulkner | Lesley | 12/19/1984 | Yahoo | 506-7119 | 01828 | Italy | $23.71 | 8 | 8.3 |
Blackwell | Noah | 12/22/1968 | 177-1263 | 45315 | Australia | $52.49 | 2 | 5.6 | |
Slater | Guinevere | 02/21/1985 | Cisco | 463-7219 | 96393 | Germany | $93.91 | 3 | 0.1 |
Foreman | Victor | 01/19/1982 | Amazon | 469-7270 | 65387 | India | $39.32 | 1 | 4.9 |
Yang | Althea | 06/27/1968 | 650-9563 | 94636 | Canada | $53.08 | 2 | 9.9 | |
Norton | Imelda | 02/03/1975 | Samsung | 939-7078 | 81130 | Spain | $58.22 | 9 | 5.7 |
Crane | Megan | 06/01/1981 | Oracle | 505-3453 | 90892 | India | $74.68 | 7 | 6.4 |
Terrell | Sopoline | 11/24/1973 | Intel | 667-0137 | 53848 | Spain | $19.14 | 6 | 1.4 |
Stafford | Edward | 09/26/1990 | Cisco | 951-5776 | 02123 | Brazil | $83.41 | 9 | 2.4 |
Marsh | Jakeem | 07/03/1996 | LG | 571-0222 | 10186 | Brazil | $44.35 | 10 | 1.0 |
Haynes | Chaim | 05/19/1995 | Sony | 635-9572 | 57149 | India | $24.75 | 6 | 8.9 |
Mullins | Hilary | 02/13/1996 | Xerox | 750-5339 | 25841 | India | $54.10 | 2 | 1.8 |
Ashley | Lenore | 08/07/1980 | Yahoo | 668-1877 | 19220 | France | $70.55 | 5 | 8.2 |
Frost | Dakota | 02/23/1965 | Samsung | 839-1688 | 12995 | France | $40.85 | 8 | 7.0 |
Responsive table with the collapse
mode:
Cut-off columns on the right can be shown/hidden via the “+”/”-” button in each row.
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 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 |
Fox | Diana | 12/08/1991 | Samsung |
Huff | Chastity | 11/14/1995 | Samsung |
Peters | Luke | 06/30/1991 | Mozilla |
Newman | Cally | 06/21/1975 | Cisco |
Dunn | Daryl | 10/20/1976 | Amazon |
Harrison | Camilla | 12/15/1982 | Cisco |
Robinson | Finn | 08/18/1996 | Yahoo |
Fleming | Idona | 03/04/1987 | Adobe |
Joyce | Jerry | 09/27/1979 | Sony |
Pace | Zachary | 04/18/1983 | Cisco |
Holder | Timothy | 05/03/1975 | |
Whitfield | Brandon | 09/16/1968 | Xerox |
Campbell | Giselle | 03/14/1963 | |
Velazquez | Chancellor | 03/07/1995 | Microsoft |
Park | Colby | 03/16/1960 | Amazon |
Hall | Caryn | 07/24/1970 | |
Faulkner | Lesley | 12/19/1984 | Yahoo |
Blackwell | Noah | 12/22/1968 | |
Slater | Guinevere | 02/21/1985 | Cisco |
Foreman | Victor | 01/19/1982 | Amazon |
Yang | Althea | 06/27/1968 | |
Norton | Imelda | 02/03/1975 | Samsung |
Crane | Megan | 06/01/1981 | Oracle |
Terrell | Sopoline | 11/24/1973 | Intel |
Stafford | Edward | 09/26/1990 | Cisco |
Marsh | Jakeem | 07/03/1996 | LG |
Haynes | Chaim | 05/19/1995 | Sony |
Mullins | Hilary | 02/13/1996 | Xerox |
Ashley | Lenore | 08/07/1980 | Yahoo |
Frost | Dakota | 02/23/1965 | Samsung |
Usage instructions
Responsive Tables Extension 1.7
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="phone" /] |
For the stack
mode:
[table id=123 responsive=stack responsive_breakpoint="phone" /] |
Here, the value of theresponsive_breakpoint
parameter (possible values are phone
, tablet
, desktop
, and all
) sets the biggest screen size for which the flip
or stack
mode shall be used, according to this list:
phone
: Theflip
orstack
mode is used only on phones (devices with a screen width smaller than 768 pixels)tablet
: Theflip
orstack
mode is used on phones and tablets (devices with a screen width smaller than 980 pixels)desktop
: Theflip
orstack
mode is used on phones, tablets, and medium-sized desktop monitors (devices with a screen width smaller than 1200 pixels)all
: Theflip
orstack
mode is used on all screens, regardless of their screen size