How to add spacing to a table using tailwind-CodePudding

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.

CodePudding user response：

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 >.

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 >
  <tr >
    <td >42.80</td>
    <td >42.80</td>
    <td >52.51</td>
    <td >60.40</td>
    <td >96.28</td>
    <td >69.18</td>
    <td >54.43</td>
    <td >69.18</td>
    <td >96.28</td>
    <td >60.40</td>
  </tr>
  <tr >
    <td >42.80</td>
    <td >42.80</td>
    <td >52.51</td>
    <td >60.40</td>
    <td >96.28</td>
    <td >69.18</td>
    <td >54.43</td>
    <td >69.18</td>
    <td >96.28</td>
    <td >60.40</td>
  </tr>
</table>

Also on TW Playground: https://play.tailwindcss.com/UYWXm7PTEo