Tables

Documentation and examples for selectively styling tables with TailwindCSS.

Basic example

Basic table example with least configuration.

<table className="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>Peter</td>
            <td>Torres</td>
            <td>@torres</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Jacob</td>
            <td>Maldonado</td>
            <td>@maldonado</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Logan</td>
            <td>Simon</td>
            <td>@simon</td>
        </tr>
    </tbody>
</table>

Colored Rows

Below are the row color variations that can be used in the table component.

<table className="table">
    <tbody>
        <tr>
            <td className="border-none">Default</td>
            <td className="border-none">Cell</td>
            <td className="border-none">Cell</td>
            <td className="border-none">Cell</td>
        </tr>
        <tr className="bg-blue-500/20">
            <td className="border-none">Primary</td>
            <td className="border-none">Cell</td>
            <td className="border-none">Cell</td>
            <td className="border-none">Cell</td>
        </tr>
        <tr className="bg-green-500/20">
            <td className="border-none">Success</td>
            <td className="border-none">Cell</td>
            <td className="border-none">Cell</td>
            <td className="border-none">Cell</td>
        </tr>
        <tr className="bg-red-500/20">
            <td className="border-none">Danger</td>
            <td className="border-none">Cell</td>
            <td className="border-none">Cell</td>
            <td className="border-none">Cell</td>
        </tr>
        <tr className="bg-amber-500/20">
            <td className="border-none">Warning</td>
            <td className="border-none">Logan</td>
            <td className="border-none">Simon</td>
            <td className="border-none">@simon</td>
        </tr>
        <tr className="bg-cyan-500/20">
            <td className="border-none">Info</td>
            <td className="border-none">Logan</td>
            <td className="border-none">Simon</td>
            <td className="border-none">@simon</td>
        </tr>
    </tbody>
</table>

Striped Rows

Use this example to increase the readability of the data sets by alternating the background colors of every second table row.

<table className="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr className="bg-accent dark:bg-dark-200">
            <th>1</th>
            <td>Peter</td>
            <td>Torres</td>
            <td>@torres</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Jacob</td>
            <td>Maldonado</td>
            <td>@maldonado</td>
        </tr>
        <tr className="bg-accent dark:bg-dark-200">
            <th>2</th>
            <td>Logan</td>
            <td>Simon</td>
            <td>@simon</td>
        </tr>
        <tr>
            <th>3</th>
            <td>Cora</td>
            <td>Henderson</td>
            <td>@henderson</td>
        </tr>
    </tbody>
</table>

Hoverable

Use the hover:[bg-*] utility class from to change the background color of a data row when hovering over the element with the cursor.

<table className="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr className="hover:bg-accent/5">
            <th>1</th>
            <td>Peter</td>
            <td>Torres</td>
            <td>@torres</td>
        </tr>
        <tr className="hover:bg-accent/5">
            <th>2</th>
            <td>Jacob</td>
            <td>Maldonado</td>
            <td>@maldonado</td>
        </tr>
        <tr className="hover:bg-accent/5">
            <th>2</th>
            <td>Logan</td>
            <td>Simon</td>
            <td>@simon</td>
        </tr>
        <tr className="hover:bg-accent/5">
            <th>3</th>
            <td>Cora</td>
            <td>Henderson</td>
            <td>@henderson</td>
        </tr>
    </tbody>
</table>

Bordered

Add the .border class for borders on all sides of the table and cells.

<table className="border-border table border">
    <thead>
        <tr>
            <th scope="col" className="border">
                #
            </th>
            <th scope="col" className="border">
                First
            </th>
            <th scope="col" className="border">
                Last
            </th>
            <th scope="col" className="border">
                Handle
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th className="border">1</th>
            <td className="border">Peter</td>
            <td className="border">Torres</td>
            <td className="border">@torres</td>
        </tr>
        <tr>
            <th className="border">2</th>
            <td className="border">Jacob</td>
            <td className="border">Maldonado</td>
            <td className="border">@maldonado</td>
        </tr>
        <tr>
            <th className="border">2</th>
            <td className="border">Logan</td>
            <td className="border">Simon</td>
            <td className="border">@simon</td>
        </tr>
        <tr>
            <th className="border">3</th>
            <td className="border">Cora</td>
            <td className="border">Henderson</td>
            <td className="border">@henderson</td>
        </tr>
    </tbody>
</table>