Optional table caption.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
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 |
@twitter |
Add .table-bordered
for borders on all sides of the table and cells.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
Add .table-hover
to enable a hover state on table rows within
a <tbody>
.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
Add .table-condensed
to make tables more compact by cutting cell padding in half.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
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.
Vertical clipping/truncation
Responsive tables make use of overflow-y: hidden
, which
clips off any content that goes beyond the bottom or top edges of
the table. In particular, this can clip off dropdown menus and other
third-party widgets.
Vertical clipping/truncation
Firefox has some awkward fieldset styling involving width that interferes
with the responsive table. This cannot be overridden without
a Firefox-specific hack that we don’t provide:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
For more information, read this Stack Overflow answer.
# |
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 |
Use contextual classes to color table rows or individual cells.
Class |
Description |
.active
|
Applies the hover color to a particular row or cell |
.success
|
Indicates a successful or positive action |
.info
|
Indicates a neutral informative change or action |
.warning
|
Indicates a warning that might need attention |
.danger
|
Indicates a dangerous or potentially negative action |
# |
Column heading |
Column heading |
Column heading |
1 |
Column content |
Column content |
Column content |
2 |
Column content |
Column content |
Column content |
3 |
Column content |
Column content |
Column content |
4 |
Column content |
Column content |
Column content |
5 |
Column content |
Column content |
Column content |
6 |
Column content |
Column content |
Column content |
7 |
Column content |
Column content |
Column content |
8 |
Column content |
Column content |
Column content |
9 |
Column content |
Column content |
Column content |
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |