How to Create Striped Tables with Tailwind CSS

Last updated on May 10, 2022 Pennywise Loading... Post a comment

A striped table or a zebra striped table is a table whose odd and even rows have different background colors. This makes it easier for users to read as well as aesthetically pleasing.

This succinct article shows you how to create a striped table with Tailwind CSS. The point here is to use the even and odd modifiers for <tr>, like so:

<tr class="even:bg-amber-100 odd:bg-blue-100">
   <td> ... </td>
</tr>

If you need more clarity and completeness, see the example below.

Example

Screenshot:

The code:

<body class="p-20">
    <table class="
    table-auto border-collapse border border-slate-300">
        <thead>
            <tr class="bg-indigo-400 text-white">
                <td class="p-2">ID</td>
                <td class="p-2">Name</td>
                <td class="p-2">Price</td>
            </tr>
        </thead>
        <tbody>
            <tr class="even:bg-amber-100 odd:bg-blue-100">
                <td class="p-2">1</td>
                <td class="p-2">Blue T-shirt</td>
                <td class="p-2">$9</td>
            </tr>
            <tr class="even:bg-amber-100 odd:bg-blue-100">
                <td class="p-2">2</td>
                <td class="p-2">Pink T-shirt</td>
                <td class="p-2">$7</td>
            </tr>
            <tr class="even:bg-amber-100 odd:bg-blue-100">
                <td class="p-2">3</td>
                <td class="p-2">Red T-shirt</td>
                <td class="p-2">$4</td>
            </tr>
            <tr class="even:bg-amber-100 odd:bg-blue-100">
                <td class="p-2">4</td>
                <td class="p-2">Green T-shirt</td>
                <td class="p-2">$20</td>
            </tr>
        </tbody>
    </table>
</body>

That’s it. Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like