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