Default Bootstrap tables can be extended with the following features:
- Disabled row for inactive items
- Nested items to present hierarchy
- ID column that preserves its width
- Actions column which always keeps all actions in a single row
- Table cells vertically aligned to top (
.table-cell-top
)
This is the recommended setup for simple table listing:
Example
# | Page Title | Time Created | |
---|---|---|---|
1 | Hotforwords Can Explain Lorem Ipsum far better than I can | 06/09/2015 18:05 | |
2 | A nested item; Which to isn’t lesser together | 06/03/2015 12:55 | |
3 | Seas spirit morning, fill seasons every I wherein kind | 06/03/2015 12:45 | |
4 | A disabled item, eg. for unpublished articles | 06/03/2015 10:02 | |
5 | Cattle she’d of herb third | 06/02/2015 12:15 |
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th class="table-cell-id">#</th>
<th>Page Title</th>
<th class="text-right">Time Created</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-cell-id">1</td>
<td><a href="#">Hotforwords Can Explain Lorem Ipsum far better than I can</a></td>
<td class="text-right text-nowrap">
<small>06/09/2015 18:05</small>
</td>
<td class="table-cell-actions">
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</td>
</tr>
<tr class="table-row-nested">
<td class="table-cell-id">2</td>
<td><a href="#">A nested item; Which to isn’t lesser together</a></td>
<td class="text-right text-nowrap">
<small>06/03/2015 12:55</small>
</td>
<td class="table-cell-actions">
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</td>
</tr>
<tr>
<td class="table-cell-id">3</td>
<td><a href="#">Seas spirit morning, fill seasons every I wherein kind</a></td>
<td class="text-right text-nowrap">
<small>06/03/2015 12:45</small>
</td>
<td class="table-cell-actions">
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</td>
</tr>
<tr class="disabled">
<td class="table-cell-id">4</td>
<td><a href="#">A disabled item, eg. for unpublished articles</a></td>
<td class="text-right text-nowrap">
<small>06/03/2015 10:02</small>
</td>
<td class="table-cell-actions">
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</td>
</tr>
<tr>
<td class="table-cell-id">5</td>
<td><a href="#">Cattle she’d of herb third</a></td>
<td class="text-right text-nowrap">
<small>06/02/2015 12:15</small>
</td>
<td class="table-cell-actions">
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>