Bootstrap 3 Tables
Bootstrap includes classes for styling tables.
You can choose from a number of classes when using tables. The Bootstrap table classes include styles for padding and displaying borders and row background colors. There's also a class for a hover over effect.
Basic Table
For a basic table with lightly padded cells and horizontal dividers, apply Bootstrap's .table
class to the <table>
element.
Striped Table
For alternating background colors on the rows, add Bootstrap's .table-striped
class (while keeping the .table
class in place).
Bordered Table
For borders all around the table, use Bootstrap's .table-bordered
class (while keeping the .table
class in place).
Hover Rows
To achieve that "hover" effect when mousing over the table rows, use Bootstrap's .table-hover
class (while keeping the .table
class in place).
Condensed Table
If you find a table has too much padding, you can half the padding by using Bootstrap's .table-condensed
class (while keeping the .table
class in place).
Contextual Classes
You can apply color to individual rows or cells by using Bootstrap's contextual classes.
Responsive Tables
Responsive tables automatically create horizontal scrollbars when viewed on small devices or viewports (under 768 pixels). Actually, the table is nested inside a <div>
which grows scrollbars.
To do this, nest the <table>
element inside a <div>
element with the .table-responsive
class applied.