Bootstrap Table Dark (.table-dark)

Bootstrap provides an extremely simple way to invert the colors of your table, creating a sleek dark-themed data grid. By adding a single class, .table-dark, the background immediately turns dark grey and the text becomes light for high-contrast readability.

1. The Basic Dark Table

To create a dark table, you must include the base .table class, followed by the modifier .table-dark class.

<div class="table-responsive">
    <table class="table table-dark">
        <!-- Table Content -->
    </table>
</div>

2. Dark Table with Striped Rows

You can mix the dark table utility with the other modifier classes we learned recently. For example, adding .table-striped creates alternating darker/lighter grey rows that look fantastic in dark mode dashboards.

<!-- Striping works perfectly on dark backgrounds -->
<table class="table table-dark table-striped">...</table>

3. Dark Table with Hover States

Combining .table-dark with .table-hover allows users to trace horizontal data by highlighting the row underneath their cursor with a slightly brighter shade of grey.

<table class="table table-dark table-hover">...</table>

4. Dark Table Headers Only

What if you want the table body to remain light, but want a strong, high-contrast header row at the top to anchor the data? You can apply the .table-dark class specifically to the <thead> tag instead of the entire table!

<table class="table">
    <!-- Applying darkness only to the header block -->
    <thead class="table-dark">
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>