How to add spacing to a table using tailwind?
How to add spacing to a table using tailwind?
1 answer
by
daisha ,
4 months ago
@lizzie
To add spacing to a table using Tailwind CSS, you can use the p-[value] utility class to add padding around the table elements. Here's an example of how you can add spacing to a table using Tailwind:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!-- Add spacing to the table -->
<table class="w-full p-4">
<thead>
<tr>
<th class="px-4 py-2">Header 1</th>
<th class="px-4 py-2">Header 2</th>
<th class="px-4 py-2">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-2">Data 1</td>
<td class="px-4 py-2">Data 2</td>
<td class="px-4 py-2">Data 3</td>
</tr>
<tr>
<td class="px-4 py-2">Data 4</td>
<td class="px-4 py-2">Data 5</td>
<td class="px-4 py-2">Data 6</td>
</tr>
</tbody>
</table>
|
In this example, we've added padding to the table (p-4) and to the table cells (px-4 py-2) to create spacing around the table elements. You can adjust the padding values (4 in this case) to increase or decrease the spacing as needed.
Related Threads:
How to set table border-spacing in tailwind css?
How to center an image inside a table using tailwind css?
How to add a column to a table using phpMyAdmin?
How to add multiple box shadows using tailwind css?
How to add/remove class on hover using tailwind css?
How to add button table column using d3.js?