Table

Default

Use .table to style tabular data with consistent spacing, borders and typography.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table">
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">First</th>
			<th scope="col">Last</th>
			<th scope="col">Handle</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>John</td>
			<td>Doe</td>
			<td>@social</td>
		</tr>
	</tbody>
</table>

Striped

Use .table-striped to add alternating row backgrounds.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-striped">
	...
</table>

Hover

Use .table-hover to highlight rows on hover.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table table-hover">
	...
</table>

Active row

Use .is-active on a table row to highlight it.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table">
	<tbody>
		<tr class="is-active">
			<th scope="row">2</th>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
	</tbody>
</table>

Bordered

Use .table-bordered to add borders around all table cells.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

<table class="table table-bordered">
	...
</table>

Borderless

Use .table-borderless to remove table borders.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

<table class="table table-borderless">
	...
</table>

Small

Use .table-sm to reduce cell padding.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

<table class="table table-sm">
	...
</table>

Responsive

Wrap a table with .table-responsive to make wide tables horizontally scrollable on smaller screens.

<div class="table-responsive">
	<table class="table">
		...
	</table>
</div>