Table, Scrollable

Best Practice

• Do not use table-striped on this table.
• You may need to reduce the window’s width to see the table’s horizontal scrolling.
• Tables allows the user to compare data.
• Use accessible Table markup, like what’s provided.
• Pagination goes below a table if you need it.
• Use Tables to display tabular data, not for layout.
• Tables size their columns by the longest amount of unbroken text in either the column header or the column.
• Use Cards for browsing content.
• Use Tables for comparing data.

Usage

<div role="region" aria-labelledby="tableCaption01" tabindex="0" class="table-scrollable-wrapper">
    <table class="table table-scrollable">
        <caption id="tableCaption01" class="visually-hidden">Table caption describes the data presented.</caption>
        <thead>
            <tr>
                <th scope="col" id="userColumn" aria-labelledby="user">
                    <button type="button" class="btn btn-link py-0" aria-labelledby="userSort">
                        <span class="icon fas fa-sort me-1" aria-hidden="true"></span>
                        <span id="user">User</span>
                        <span class="visually-hidden" id="userSort">Sort the table by User</span>
                    </button>
                </th>
                <th scope="col" id="roleColumn" aria-labelledby="role">
                    <button type="button" class="btn btn-link py-0" aria-labelledby="roleSort">
                        <span class="icon fas fa-sort me-1" aria-hidden="true"></span>
                        <span id="role">Role</span>
                        <span class="visually-hidden" id="roleSort">Sort the table by Role</span>
                    </button>
                </th>
                <th scope="col" id="descriptionColumn">
                    Description of Role’s Responsibilities
                </th>
                <th scope="col" id="trainingColumn" aria-labelledby="training">
                    <span id="training">Training Complete</span>
                </th>
                <th scope="col" id="teamColumn" aria-labelledby="team">
                    <button type="button" class="btn btn-link py-0" aria-labelledby="teamSort">
                        <span class="icon fas fa-sort me-1" aria-hidden="true"></span>
                        <span id="team">Team</span>
                        <span class="visually-hidden" id="teamSort">Sort the table by Team</span>
                    </button>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row" id="John">John</th>
                <td headers="roleColumn John">Boss</td>
                <td headers="descriptionColumn John">Lorem ipsum dolorsitamet, consecteturadipiscing, doeiusmodtemporincididuntutlaboreetdoloremagna.</td>
                <td headers="trainingColumn John">
                    <span class="badge badge-ui">Modernization</span>
                    <span class="badge badge-ui">Onboarding</span>
                </td>
                <td headers="teamColumn John">
                    <span class="badge badge-primary">Administration</span>
                </td>
            </tr>
            <tr>
                <th scope="row" id="Susan">Susan</th>
                <td headers="roleColumn Susan">Developer</td>
                <td headers="descriptionColumn Susan">Lorem ipsum dolorsitamet, consecteturadipiscing, doeiusmodtemporincididuntutlaboreetdoloremagna.</td>
                <td headers="trainingColumn Susan">
                    <span class="badge badge-ui">Modernization</span>
                    <span class="badge badge-ui">.NET</span>
                </td>
                <td headers="teamColumn Susan">
                    <span class="badge badge-primary">DevTeam03</span>
                </td>
            </tr>
            <tr>
                <th scope="row" id="Deborah">Deborah</th>
                <td headers="roleColumn Deborah">Business Analyst</td>
                <td headers="descriptionColumn Deborah">Lorem ipsum dolorsitamet, consecteturadipiscing, doeiusmodtemporincididuntutlaboreetdoloremagna.</td>
                <td headers="trainingColumn Deborah">
                    <span class="badge badge-ui">Modernization</span>
                    <span class="badge badge-ui">PMI</span>
                </td>
                <td headers="teamColumn Deborah">
                    <span class="badge badge-primary">BATeam02</span>
                </td>
            </tr>
            <tr>
                <th scope="row" id="Rick">Rick</th>
                <td headers="roleColumn Rick">Business Analyst</td>
                <td headers="descriptionColumn Rick">Lorem ipsum dolorsitamet, consecteturadipiscing, doeiusmodtemporincididuntutlaboreetdoloremagna.</td>
                <td headers="trainingColumn Rick">
                    <span class="badge badge-ui">Modernization</span>
                    <span class="badge badge-ui">PMI</span>
                </td>
                <td headers="teamColumn Rick">
                    <span class="badge badge-primary">BATeam01</span>
                </td>
            </tr>
            <tr>
                <th scope="row" id="AlexanderConstantine">AlexanderConstantine</th>
                <td headers="roleColumn AlexanderConstantine">Product Owner</td>
                <td headers="descriptionColumn AlexanderConstantine">Lorem ipsum dolorsitamet, consecteturadipiscing, doeiusmodtemporincididuntutlaboreetdoloremagna.</td>
                <td headers="trainingColumn AlexanderConstantine">
                    <span class="badge badge-ui">Modernization</span>
                    <span class="badge badge-ui">JIRA</span>
                </td>
                <td headers="teamColumn AlexanderConstantine">
                    <span class="badge badge-primary">POTeam01</span>
                </td>
            </tr>
            <tr>
                <th scope="row" id="José">José</th>
                <td headers="roleColumn José">Tester</td>
                <td headers="descriptionColumn José">Lorem ipsum dolorsitamet, consecteturadipiscing, doeiusmodtemporincididuntutlaboreetdoloremagna.</td>
                <td headers="trainingColumn José">
                    <span class="badge badge-ui">Modernization</span>
                    <span class="badge badge-ui">RoboTester</span>
                </td>
                <td headers="teamColumn José">
                    <span class="badge badge-primary">DevTeam01</span>
                </td>
            </tr>
            <tr>
                <th scope="row" id="Bob">Bob</th>
                <td headers="roleColumn Bob">Business Analyst</td>
                <td headers="descriptionColumn Bob">Lorem ipsum dolorsitamet, consecteturadipiscing, doeiusmodtemporincididuntutlaboreetdoloremagna.</td>
                <td headers="trainingColumn Bob">
                    <span class="badge badge-ui">Modernization</span>
                    <span class="badge badge-ui">PMI</span>
                </td>
                <td headers="teamColumn Bob">
                    <span class="badge badge-primary">Administration</span>
                </td>
            </tr>
            <tr>
                <th scope="row" id="Jane">Jane</th>
                <td headers="roleColumn Jane">Database Administrator</td>
                <td headers="descriptionColumn Jane">Lorem ipsum dolorsitamet, consecteturadipiscing, doeiusmodtemporincididuntutlaboreetdoloremagna.</td>
                <td headers="trainingColumn Jane">
                    <span class="badge badge-ui">Modernization</span>
                    <span class="badge badge-ui">MSSQL</span>
                    <span class="badge badge-ui">MySQL</span>
                </td>
                <td headers="teamColumn Jane">
                    <span class="badge badge-primary">DevTeam03</span>
                </td>
            </tr>
            <tr>
                <th scope="row" id="Todd">Todd</th>
                <td headers="roleColumn Todd">Developer</td>
                <td headers="descriptionColumn Todd">Lorem ipsum dolorsitamet, consecteturadipiscing, doeiusmodtemporincididuntutlaboreetdoloremagna.</td>
                <td headers="trainingColumn Todd">
                    <span class="badge badge-ui">Modernization</span>
                    <span class="badge badge-ui">.NET</span>
                    <span class="badge badge-ui">Flutter</span>
                </td>
                <td headers="teamColumn Todd">
                    <span class="badge badge-primary">DevTeam02</span>
                </td>
            </tr>
            <tr>
                <th scope="row" id="Frank">Frank</th>
                <td headers="roleColumn Frank">Developer</td>
                <td headers="descriptionColumn Frank">Lorem ipsum dolorsitamet, consecteturadipiscing, doeiusmodtemporincididuntutlaboreetdoloremagna.</td>
                <td headers="trainingColumn Frank">
                    <span class="badge badge-ui">Modernization</span>
                    <span class="badge badge-ui">.NET</span>
                    <span class="badge badge-ui">Swift</span>
                </td>
                <td headers="teamColumn Frank">
                    <span class="badge badge-primary">DevTeam01</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Resources

• Bootstrap Documentation - Tables
• Mozilla Developer Network - HTML Table Advanced Features and Accessibility