For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
| # | First Name | Last Name | Username | 
|---|---|---|---|
| 1 | Mark | Otto | @mdo | 
| 2 | Jacob | Thornton | @fat | 
| 3 | Larry | the Bird | 
Use .table-striped to add zebra-striping to any table row within the <tbody>
| # | First Name | Last Name | Username | 
|---|---|---|---|
| 1 | Mark | Otto | @mdo | 
| 2 | Jacob | Thornton | @fat | 
| 3 | Larry | the Bird | 
Note: Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading | 
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | 
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | 
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | 
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading | 
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | 
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | 
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |