Language selection

Government of Canada / Gouvernement du Canada

Search

Tables

Basic example .table

Optional table caption.
Number First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
...
</table>

Striped rows .table-striped

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

Bordered table .table-bordered

Number First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered">
...
</table>

Hover rows .table-hover

Number First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover">
...
</table>

Condensed table .table-condensed

Number First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-condensed">
...
</table>

Contextual classes

.active
Applies the hover colour to a Active 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
Number Column heading Column heading Column heading
Active - 1 Column content Column content Column content
2 Column content Column content Column content
Success - 3 Column content Column content Column content
4 Column content Column content Column content
Info - 5 Column content Column content Column content
6 Column content Column content Column content
Warning - 7 Column content Column content Column content
8 Column content Column content Column content
Danger - 9 Column content Column content Column content
On data cell - 1 Active - Column content Column content Column content
On data cell - 2 Column content Column content Column content
On data cell - 3 Success - Column content Column content Column content
On data cell - 4 Column content Column content Column content
On data cell - 5 Info - Column content Column content Column content
On data cell - 6 Column content Column content Column content
On data cell - 7 Warning - Column content Column content Column content
On data cell - 8 Column content Column content Column content
On data cell - 9 Danger - Column content Column content Column content 
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells `td` or `th` -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>

Responsive tables .table-responsive

Number 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 
<div class="table-responsive">
<table class="table">
...
</table>
</div>

Table Grids .tbl-gridify

Number 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 
<table class="table tbl-gridify">
...
</table>

Tables within panels

Panel title

Description of the topic discussed in this panel

Lorem ipsum...

Table caption text
Table header Table header
Table data Table data
Table data Table data

Panel footer

<section class="panel panel-default">
	<header class="panel-heading">
		...
	</header>
	<div class="panel-body">
		...
		<table class="table">
			...
		</table>
	</div>
	<footer class="panel-footer">
		...
	</footer>
</section>

Collapse classes

Table header Table header Table header
Table data 1 Table data 2 Table data 3
Table data 4 Table data 5 Table data 6
Table data 7 Table data 8 Table data 9
Table data 10 Table data 11 Table data 12
Table data 13 Table data 14 Table data 15 
<table class="table">
	<thead>
		<tr>
			...
		</tr>
	</thead>
	<tbody class="collapse">
		<tr>
			...
		</tr>
		<tr>
			...
		</tr>
	</tbody>
	<tbody class="collapse in">
		<tr>
			...
		</tr>
		<tr class="collapse">
			...
		</tr>
		<tr class="collapse in">
			...
		</tr>
	</tbody>
</table>

Reference links:

Page details

Date modified: