<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</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>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<!-- table-inverse -->
<table class="table table-inverse">
</table>
<!-- table-striped -->
<table class="table table-striped">
</table>
<!-- table-bordered -->
<table class="table table-bordered">
</table>
<!-- color stripped table rows -->
<tr class="table-info">
<th scope="row">5</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
How to use
- All table styles are inherited in Bootstrap 4 meaning any nested tables will be styled in the same manner as the parent.
- Use .table-inverse class with table to get inverse style
- Use .table-striped class with table to get striped table style
- Use .table-bordered class with table to get bordered style
- You can use contextual classes (.table-active ,.table-success ,.table-info ,.table-warning ,.table-danger ) to color table rows or individual cells.