Tables

Tables

Basic example

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.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
[xml] <table class="table"> </table> [/xml]

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Cross-browser compatibility

Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
[xml] <table class="table table-striped"> </table> [/xml]

Striped rows with primary color

Use .table-striped .table-striped-primary to add zebra-striping to any table row within the <tbody>.

Cross-browser compatibility

Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Sheldon the Nerd @stringtheory
[xml] <table class="table table-striped table-striped-primary"> </table> [/xml]

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
[xml] <table class="table table-bordered"> </table> [/xml]

Hover rows

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
[xml] <table class="table table-hover"> </table> [/xml]

Condensed table

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
[xml] <table class="table table-condensed"> </table> [/xml]

Contextual classes

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
[xml] <!– On rows –> &lt;tr class="active"&gt;…&lt;/tr&gt; &lt;tr class="success"&gt;…&lt;/tr&gt; &lt;tr class="warning"&gt;…&lt;/tr&gt; &lt;tr class="danger"&gt;…&lt;/tr&gt; &lt;tr class="info"&gt;…&lt;/tr&gt; &lt;!– On cells ("td" or "th") –&gt; &lt;tr&gt; &lt;td class="active"&gt;…&lt;/td&gt; &lt;td class="success"&gt;…&lt;/td&gt; &lt;td class="warning"&gt;…&lt;/td&gt; &lt;td class="danger"&gt;…&lt;/td&gt; &lt;td class="info"&gt;…&lt;/td&gt; &lt;/tr&gt; [/xml]

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

# 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
[xml] <div class="table-responsive"> <table class="table"> </table> </div> [/xml]
2018