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.
Link
<html>
<script src=""></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>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.
Link
<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
Reset to default 10border-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
If you apply padding to the <table><table/> tag like this:
<table class="p-8"><table/>
This won't work, you need to add the border-separate property in addition, and we will finally have:
<table class="border-separate p-8"><table/>
border-separateto the table class. – pilchard Commented Dec 12, 2021 at 12:23border-separateandborder-spacing-*classes to the table element. The first class gives each cell its own border and the second lets you specify the space between them. – wkille Commented Dec 7, 2023 at 15:39