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