Search code examples
javascripthtmlcssflexboxtailwind-css

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

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:
enter image description here

Solution

  • 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