Bootstrap - Tables

bootstrap

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.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License