Bootstrap CSS Tables Reference
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
Bootstrap CSS Tables Reference
❮ Previous
Next ❯
<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 »
❮ Previous
Next ❯