How can we style a table with basic style?
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.
<table class="table">
...
</table>
How can we style a table with striped-rows?
Use .table-striped to add zebra-striping to any table row within the <tbody>:
<table class="table table-striped">
...
</table>
Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.
How can we style a table with borders?
Add .table-bordered for borders on all sides of the table and cells.
<table class="table table-bordered">
...
</table>
How can we enable a hover state on table rows?
Add .table-hover to enable a hover state on table rows within a <tbody>:
<table class="table table-hover">
...
</table>
How can we make a table more compacted / condensed?
Add .table-condensed to make tables more compact by cutting cell padding in half.
<table class="table table-condensed">
...
</table>
How can we convey meaning to assistive technologies?
Use the .sr-only class. Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the .sr-only class.
How can we make a table responsive?
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.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
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.
Firefox and fieldsets: Firefox has some awkward fieldset styling involving width that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we don't provide in Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
Here’s the CSS for .table-responsive:
.table-responsive {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
These styles cause the table to become scrollable on the horizontal axis on smaller devices.