5.8.1. Tables with Groups

Table data can be easily organized in groups.

Example

<div class="table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th class="table-cell-id">#</th>
                <th>User</th>
            </tr>
        </thead>
        <thead>
            <tr class="active">
                <th colspan="2">B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="table-cell-id">1</td>
                <td><a href="#"><strong>Brown</strong>, James</a></td>
            </tr>
        </tbody>
        <thead>
            <tr class="active">
                <th colspan="2">P</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="table-cell-id">2</td>
                <td><a href="#"><strong>Paisley</strong>, Brad</a></td>
            </tr>
            <tr>
                <td class="table-cell-id">3</td>
                <td><a href="#"><strong>Parker</strong>, Maceo</a></td>
            </tr>
        </tbody>
        <thead>
            <tr class="active">
                <th colspan="2">W</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="table-cell-id">4</td>
                <td><a href="#"><strong>Wesley</strong>, Fred</a></td>
            </tr>
        </tbody>
    </table>
</div>