How to add spacing to a table using tailwind

Question

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

Expected output:

user_4035 · Answer

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

.

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.

42.80	42.80	52.51	60.40	96.28	69.18	54.43	69.18	96.28	60.40
42.80	42.80	52.51	60.40	96.28	69.18	54.43	69.18	96.28	60.40

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

user_9565980 · Answer

If you apply padding to the tag like this:

, this will not work, you need to add the border-separate property in addition. Finally, we will have:

.

How to add spacing to a table using tailwind

2 Answers