0
129
ViewsHow to add spacing to a table using tailwind
I was trying to add space to the table but I was unable to do it. I have tried using space-x-, padding but I was not getting the output I was anticipated.
<html>
<script src="https://cdn.tailwindcss.com"></script>
<table class="table-auto">
<tr class="row space-x-3">
<td class="col bg-blue-500">42.80</td>
<td class="col bg-blue-500">42.80</td>
<td class="col bg-blue-500">52.51</td>
<td class="col bg-blue-500">60.40</td>
<td class="col bg-blue-500">96.28</td>
<td class="col bg-blue-500">69.18</td>
<td class="col bg-blue-500">54.43</td>
<td class="col bg-blue-500">69.18</td>
<td class="col bg-blue-500">96.28</td>
<td class="col bg-blue-500">60.40</td>
</tr>
<tr class="row">
<td class="col bg-blue-500">42.80</td>
<td class="col bg-blue-500">42.80</td>
<td class="col bg-blue-500">52.51</td>
<td class="col bg-blue-500">60.40</td>
<td class="col bg-blue-500">96.28</td>
<td class="col bg-blue-500">69.18</td>
<td class="col bg-blue-500">54.43</td>
<td class="col bg-blue-500">69.18</td>
<td class="col bg-blue-500">96.28</td>
<td class="col bg-blue-500">60.40</td>
</tr>
</table>
</html>Expected output:
2 answers
Answer question0
border-separate does its job for separations.
If you want more control (on degrees of separation), you can add,
border-spacing property.
But there are no utilities for border-spacing for TW.
TW doc on spacing shows space-x-3 as, margin-left: 0.75rem;
So you'd need to border-spacing: 0.75rem.
You can add a custom utility (or component) in your Tailwind CSS file.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.my-table-spacing {
border-spacing: theme("spacing.3");
}
}
And use it like <table class="border-separate my-table-spacing">.
Demo: https://play.tailwindcss.com/qAFB4JGLvo?file=css
But with Tailwind CSS v3.0, you can add arbitrary properties.
Thus, you can add [border-spacing:0.75rem] as an arbitrary property
as shown below.
<script src="https://cdn.tailwindcss.com"></script>
<table class="border-separate [border-spacing:0.75rem]">
<tr class="row">
<td class="col bg-blue-500">42.80</td>
<td class="col bg-blue-500">42.80</td>
<td class="col bg-blue-500">52.51</td>
<td class="col bg-blue-500">60.40</td>
<td class="col bg-blue-500">96.28</td>
<td class="col bg-blue-500">69.18</td>
<td class="col bg-blue-500">54.43</td>
<td class="col bg-blue-500">69.18</td>
<td class="col bg-blue-500">96.28</td>
<td class="col bg-blue-500">60.40</td>
</tr>
<tr class="row">
<td class="col bg-blue-500">42.80</td>
<td class="col bg-blue-500">42.80</td>
<td class="col bg-blue-500">52.51</td>
<td class="col bg-blue-500">60.40</td>
<td class="col bg-blue-500">96.28</td>
<td class="col bg-blue-500">69.18</td>
<td class="col bg-blue-500">54.43</td>
<td class="col bg-blue-500">69.18</td>
<td class="col bg-blue-500">96.28</td>
<td class="col bg-blue-500">60.40</td>
</tr>
</table>Also on TW Playground: https://play.tailwindcss.com/UYWXm7PTEo
0
If you apply padding to the tag like this:
<table class="p-8"><table/>, this will not work, you need to add the border-separate property in addition.
Finally, we will have:
<table class="border-separate p-8"><table/>.