Tutorials References Menu

Bootstrap CSS Tables Reference


<table> Classes

Use the classes below to style any table: 

Class Description Example
.table Adds basic styling (light padding and only horizontal dividers) to any <table> Try it
.table-striped Adds zebra-striping to any table row within <tbody> (not available in IE8) Try it
.table-bordered Adds border on all sides of the table and cells Try it
.table-hover Enables a hover state on table rows within a <tbody> Try it
.table-condensed Makes table more compact by cutting cell padding in half Try it
Combining all the table classes Try it

<tr>, <th> and <td> Classes

Use the classes below to color table rows or cells:

Class Description Example
.active Applies the hover color (light-grey) to a particular row or cell Try it
.success Indicates a successful or positive action Try it
.info Indicates a neutral informative change or action Try it
.warning Indicates a warning that might need attention Try it
.danger Indicates a dangerous or potentially negative action Try it

Responsive Tables

The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:

Example

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
Try it Yourself »