How to Create Striped Tables with Tailwind CSS
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:
- Tailwind CSS: How to Create Circle Loading Indicators
- How to Style File Inputs with Tailwind CSS
- Text Underline in Tailwind CSS
- Tailwind CSS: How to Create a Sticky/Affix NavBar
- How to Style Placeholder Text with Tailwind CSS
- How to create cut-out text effect with Tailwind CSS
You can also check out our CSS category page for the latest tutorials and examples.
Subscribe
0 Comments
You May Also Like
