Tables
Variables
var(--table-cell-padding)
: 10pxvar(--table-sm-cell-padding)
: 5pxvar(--table-bg)
: transparentvar(--table-bg-accent)
: #f9f9f9var(--table-bg-hover)
: #f5f5f5var(--table-bg-active)
: #f5f5f5var(--table-border-width)
: 1pxvar(--table-border-color)
: #eceeef
Mixins
None
Helpers
.table
.table-sm
.table-bordered
.table-striped
.table-hover
.table-responsive
Example
<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
Condensed with half padding
<table class="table table-sm">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
Bordered version
Add borders all around the table and between all the columns.
<table class="table table-bordered">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
Zebra-striping
Default zebra-stripe styles (alternating gray and transparent backgrounds)
<table class="table table-striped">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
Hover effect
Placed here since it has to come after the potential zebra striping
<table class="table table-hover">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
Responsive tables
Wrap your tables in .table-responsive
and we'll make them mobile friendly
by enabling horizontal scrolling. Only applies <768px. Everything above that
will display normally.
min-height: 0.01%
is a workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
<div class-"table-responsive">
<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
</div>