Tables in WordPress made easy.

Responsive Tables

This is a Premium Extension for TablePress. Supporting and developing it is a lot of work. To allow me to offer Extensions in the future, please consider a donation. The recommended amount for this Extension is $9. Thank you.

Due to how tables on the web work technically, they can’t 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 intended content area, the table will not fit. Unfortunately, this can lead to ugly behavior on small screens, like on phones and tablets, where then not everything of a table is visible and the table appears to be cut-off.

The Responsive Tables Extension offers three approaches or view modes 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.

And what’s really nice: In all three modes, sorting, filtering, and pagination will continue to work!

Here are examples for the three modes:

Regular table, default behavior without responsiveness enabled:

This table will likely be cut-off on the right side, which shows why an approach for responsiveness is needed.

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

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

Facebook

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

Facebook

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

Google

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

Facebook

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

Twitter

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

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

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

Facebook

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

Facebook

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

Google

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

Facebook

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

Twitter

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

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

Facebook

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

Facebook

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

Google

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

Facebook

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

Twitter

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.

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

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

Facebook

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

Facebook

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

Google

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

Facebook

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

Twitter

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

Usage instructions:

To use these modes with your tables, download, install, and activate the Extension like a regular WordPress plugin. Then, change your table’s Shortcode from something like

[table id=123 /]

[table id=123 /]

to

[table id=123 responsive=mode /]

[table id=123 responsive=mode /]

where mode is one of the three values flip, scroll, or collapse, depending on which mode you want for the table.

The flip mode (but not the others!) can be further customized, by adding another parameter that defines for which screen sizes the table should be flipped:

[table id=123 responsive=flip responsive_breakpoint=device /]

[table id=123 responsive=flip responsive_breakpoint=device /]

Here, device can be chosen from phone, tablet, desktop, and all. That sets the biggest screen size for which the flip mode shall be used, according to this list:

phone: The flip mode is used only on phones (devices with a screen width smaller than 768 pixels)

tablet: The flip mode is used on phones and tablets (devices with a screen width smaller than 980 pixels)

desktop: The flip mode is used on phones, tablets, and medium-sized desktop monitors (devices with a screen width smaller than 1200 pixels)

all: The flip mode is used on all screens, regardless of their screen size

About the Developer

Tobias Bäthge is a PhD student in the field of “Engineering Cybernetics” from Magdeburg, Germany. He loves baseball and likes to work with WordPress.