Documentation
Tables
Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.
The .table
class adds basic styling to a table:
Firstname | Lastname | |
---|---|---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
No wrap
Prevents table cell content from wrapping to another line.
Firstname | Lastname | ||
---|---|---|---|
John | Doe | john@example.com | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam beatae commodi, dignissimos dolores, doloribus eaque hic inventore laudantium magni nisi obcaecati porro quibusdam ratione rem repellat sint voluptas? |
Mary | Moe | mary@example.com | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam beatae commodi, dignissimos dolores, doloribus eaque hic inventore laudantium magni nisi obcaecati porro quibusdam ratione rem repellat sint voluptas? |
July | Dooley | july@example.com | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam beatae commodi, dignissimos dolores, doloribus eaque hic inventore laudantium magni nisi obcaecati porro quibusdam ratione rem repellat sint voluptas? |
<div class="table-responsive">
<table class="table table-nowrap">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam beatae commodi, dignissimos dolores, doloribus eaque hic inventore laudantium magni nisi obcaecati porro quibusdam ratione rem repellat sint voluptas?</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam beatae commodi, dignissimos dolores, doloribus eaque hic inventore laudantium magni nisi obcaecati porro quibusdam ratione rem repellat sint voluptas?</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam beatae commodi, dignissimos dolores, doloribus eaque hic inventore laudantium magni nisi obcaecati porro quibusdam ratione rem repellat sint voluptas?</td>
</tr>
</tbody>
</table>
</div>