Border Spacing

[jkniest]

Hey,

I just wanted to ask if something related to "border-spacing" is planed?

The default table layout does include border-spacing: 2px which is kind of annoying since I wanted to add a bottom border after the table head.

With border-spacing 2:

With border-spacing 0:

See also: https://www.w3schools.com/cssref/pr_border-spacing.asp

Have a nice day,
Jordan

[minthemiddle]

+1

Default Border Spacing is a problem.
You cannot add a continuous background color to tables because of this.

See http://jsbin.com/soxeqat/edit?html,output

[adamwathan]

We're planning to add some table related utilities in the near future but in the mean time you can easily add your own utilities:

https://tailwindcss.com/docs/adding-new-utilities

[adamwathan]

Looking at getting some of this stuff added soon but quick question, do you actually want border-spacing: 0 or do you just need border-collapse: collapse? It would be nice to avoid adding another scale to the config file for border spacing if people really just care about removing border spacing altogether.

[minthemiddle]

For the continuous background color problem, border-collapse: collapse would be enough of a solution. See: http://jsbin.com/culebiluca/2

[jkniest]

@adamwathan Yeah border-collapse: collapse should be enough. I didn't knew about this css "command".

[adamwathan]

We have border collapse utilities now as of v0.6.0 👍

[zacharypodbela]

There is an edge case where border-collapse does not work: it does not allow you to apply a continuous rounded border to a table element.

• One option as detailed in this Stack Overflow is to use border-collapse and apply styles to the last and first td child of the last and first tr children.
• The other options is to apply border-spacing: 0; and use border-separate.

Are there any plans to add support for changing border-spacing to tailwind?

[OD91]

I have a table, with:

• a right border of the first column
• and a border of the table head (first row or th tag)

These borders are supposed to be sticky when scrolling on the x- and y-axis. This case just works with border-separate but here the default is border-spacing: 2px. For a cleaner look I would need a border-spacing: 0px...

So, any progress regarding the question above? "Are there any plans to add support for changing border-spacing"

[epitaphmike]

Seem like adding your own utility is your best bet for now. With JIT enabled, it'll be nice to see this added to the core library
@adamwathan

@layer utilities {
  .border-spacing-0 {
    border-spacing: 0;
  }
}

[demeralde]

I'm also in need of this. I think this should be included in Tailwind's stock utilities.

[reinink]

Hey all, just letting you know that we've officially added border-spacing utilities to Tailwind CSS, thanks to the work of @JuanM04. This will be part of the upcoming v3.1.0 release, but if you want to use it right away, you can use an insiders release.