5.8. Tables

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

<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>