Responsive Tables

There are several methods to ensure that tables adapt appropriately to small screen sizes. Choose the method that works best based on the type of table you're using.

Remember

Resize your browser, or open this page on your mobile device to preview each table.

Default Responsive Method
Good for most types of tables.

Add the class .table to allow the table to scroll horizontally on extra-small screen sizes.

Note: the .table class also applies default styling, as illustrated on the Base HTML Elements page.

To disable horizontal table scrolling on extra-small screens, add the class .table-xs-fixed.

Example - without .table class

Distance Between Cities (in miles)

Huntsville Nashville Birmingham
Huntsville 99.68 84.59
Nashville 99.68 182.75
Birmingham 84.59 182.75
Example - with .table class

Distance Between Cities (in miles)

Huntsville Nashville Birmingham
Huntsville 99.68 84.59
Nashville 99.68 182.75
Birmingham 84.59 182.75
      

Distance Between Cities (in miles)

Huntsville Nashville Birmingham
Huntsville 99.68 84.59
Nashville 99.68 182.75
Birmingham 84.59 182.75

Stacking Method
Good for simple tables with column headings.

Add the class .table-xs-stack to the table to stack convert it into a 2-column format on mobile devices.

Example - without .table-xs-stack class
Number First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50
Example - with .table-xs-stack class
Number First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50
      
Number First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

Tables Used for Layout

In this type of table the data in each cell has no relation to the data in adjacent cells. Each cell is totally independent and not part of a column or a row.

Tables should not be used for layout. Instead use the grid system outlined here. The solution below is only to be used as a temporary fix or in special circumstances.

Add the class .cellstack to the table in order to stack each cell vertically on mobile devices.

Example - without .cellstack class
Accounting

211, 212, 307, 310, 313

Biology

119, 120, 214, 215, 216, 219, 300, 301, 314, 321, 361, 362, 401

Civil Engineering

111, 271, 272, 370

Chemistry

101, 105, 121, 123, 125, 126, 201, 223, 224, 331, 332, 361, 362

Chemical Engineering

198, 244, 295

Communication

113, 122, 231, 301, 313

Computer Engineering

112

Computer Science

102, 121, 214

Electrical Engineering

213

Economics

142, 143

English

100, 101, 102, 105, 207, 208, 209, 210, 300

Finance

301

Example - with .cellstack class
Accounting

211, 212, 307, 310, 313

Biology

119, 120, 214, 215, 216, 219, 300, 301, 314, 321, 361, 362, 401

Civil Engineering

111, 271, 272, 370

Chemistry

101, 105, 121, 123, 125, 126, 201, 223, 224, 331, 332, 361, 362

Chemical Engineering

198, 244, 295

Communication

113, 122, 231, 301, 313

Computer Engineering

112

Computer Science

102, 121, 214

Electrical Engineering

213

Economics

142, 143

English

100, 101, 102, 105, 207, 208, 209, 210, 300

Finance

301

      
Accounting

211, 212, 307, 310, 313

Biology

119, 120, 214, 215, 216, 219, 300, 301, 314, 321, 361, 362, 401

Civil Engineering

111, 271, 272, 370

Chemistry

101, 105, 121, 123, 125, 126, 201, 223, 224, 331, 332, 361, 362

Chemical Engineering

198, 244, 295

Communication

113, 122, 231, 301, 313

Computer Engineering

112

Computer Science

102, 121, 214

Electrical Engineering

213

Economics

142, 143

English

100, 101, 102, 105, 207, 208, 209, 210, 300

Finance

301