Design
The default styling — light padding and only horizontal dividers — add the base class .table to any <table>.
<table class="table">
<caption>Contact Information</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
...
</tbody>
<tfoot>
<tr>
<td colspan="2">
Users listed in this table: <b>6</b>
</td>
<td colspan="2">
<div class="d-flex justify-content-end">
<button class="btn btn-primary mb-0">Confirm</div>
<button class="btn mb-0">Cancel</div>
</div>
</td>
</tr>
</tfoot>
</table>
Plain tables
For plain styling — light padding and no striped rows or horizontal dividers — add the class .table-plain (together with the base class) to any <table>.
<table class="table table-plain">
<caption>Contact Information</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
<tfoot>
<tr>
<td colspan="">
<nav class="d-flex justify-content-end" aria-label="Page navigation for the data grid">
...
</nav>
</td>
</tr>
</tfoot>
</table>
Zebra tables variant
For adding the old zebra stripe styling (striped rows and vertical dotted dividers), add the class .table-stripe (together with the base class) to any <table>.
<table class="table table-stripe">
<caption>Contact Information</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
...
</tbody>
<tfoot>
<tr>
<td colspan="2">
Users listed in this table: <b>6</b>
</td>
<td colspan="2">
<div class="d-flex justify-content-end">
<button class="btn btn-primary mb-0">Confirm</div>
<button class="btn mb-0">Cancel</div>
</div>
</td>
</tr>
</tfoot>
</table>
Table row state
Hover on rows
For this style you need to add this additional class .table-hover to your table.
<table class="table table-hover">
...
</table>
Active rows
For this style you need to add this additional class .table-active to your table. For case, the hover on each row will apply too.
<table class="table table-active">
...
</table>
Error validation table row
For this style you need to add the .has-errorclass to table row tag (<tr>). To indent the error icon just wrap it in container with the .indent-error class, the indent works only for the first table cell.
<table class="table table-active">
...
<tbody>
...
<tr class="has-error">
<td scope="row">
<span class="indent-error">
<span class="vismaicon vismaicon-error"></span>
</span>
2
</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
...
</tbody>
</table>
Size
Table grid size variants:
- Condensed table grid design: 32px row height
Add .table-condensed to make tables more compact by cutting cell padding.
<table class="table table-condensed">
...
</table>
- Default table grid design: 40px row height
- Regular table grid design: 48px row height
Add .table-regular to make tables more compact by cutting cell padding.
<table class="table table-regular">
...
</table>
- Relaxed table grid design: 56px row height
Add .table-relaxed to make tables more compact by cutting cell padding.
<table class="table table-relaxed">
...
</table>