Tables
Table layout
Class | Properties |
---|---|
table-layout-auto |
table-layout: auto; |
table-layout-fixed |
table-layout: fixed; |
Basic usage
Use table-responsive
to allow the table to automatically change format for mobile.
Use table-striped
to allow the table to automatically apply different background color for even elements.
Use table-hover
to allow the table to automatically apply different background color when hovering elements.
Use table-layout-auto
to allow the width of the table and its cells to be adjusted to fit the content. Most browsers use this algorithm by default.
Use table-layout-fixed
When using this keyword, the table's width needs to be specified explicitly using the width
property.
Code
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">Dave Gamache</td>
<td data-label="Age">26</td>
<td data-label="Sex">Male</td>
<td data-label="Location">San Francisco</td>
</tr>
<tr>
<td data-label="Name">Leanne Graham</td>
<td data-label="Age">39</td>
<td data-label="Sex">Female</td>
<td data-label="Location">Gwenborough</td>
</tr>
</tbody>
</table>