Tables

Default styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

Responsive tables

Since v7.0.3, tables are responsive by default. On smaller screens, the first section of a complex table will fill the width of the screen and a horizontal scroll bar will appear at the bottom of the table. Users can scroll left/right to view the other parts of the table.

#

First Name

Last Name

Username

1

Mark

Otto

@mdo

2

Jacob

Thornton

@fat

3

Larry

the Bird

@twitter

<tableclass="table">

…

</table>

Optional classes

Add any of the follow classes to the .table base class.

.table-striped

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

#

First Name

Last Name

Username

1

Mark

Otto

@mdo

2

Jacob

Thornton

@fat

3

Larry

the Bird

@twitter

<tableclass="table table-striped">

…

</table>

.table-bordered

Add borders and rounded corners to the table.

#

First Name

Last Name

Username

1

Mark

Otto

@mdo

Mark

Otto

@TwBootstrap

2

Jacob

Thornton

@fat

3

Larry the Bird

@twitter

<tableclass="table table-bordered">

…

</table>

.table-hover

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

<tableclass="table table-hover">

…

</table>

.table-condensed

Makes 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

<tableclass="table table-condensed">

…

</table>

Optional row classes

Use contextual classes to color table rows.

Class

Description

.success

Indicates a successful or positive action.

.error

Indicates a dangerous or potentially negative action.

.info

Used as an alternative to the default styles.

#

Product

Payment Taken

Status

1

TB – Monthly

01/04/2012

Approved

2

TB – Monthly

02/04/2012

Declined

3

TB – Monthly

03/04/2012

Pending

...

<tr class="success">

<td>1</td>

<td>TB - Monthly</td>

<td>01/04/2012</td>

<td>Approved</td>

</tr>

...

Supported table markup

List of supported table HTML elements and how they should be used.

Tag

Description

<table>

Wrapping element for displaying data in a tabular format

<thead>

Container element for table header rows (<tr>) to label table columns

<tbody>

Container element for table rows (<tr>) in the body of the table

<tr>

Container element for a set of table cells (<td> or <th>) that appears on a single row

<td>

Default table cell

<th>

Special table cell for column (or row, depending on scope and placement) labels
Must be used within a <thead>

<caption>

Description or summary of what the table holds, especially useful for screen readers