increase spacing between dashed border for <th> tag of <table>-CodePudding

I have below codepen as follows

As you can see the output of codepen, the header tags has dashed border at top and bottom. I am trying to increase the spacing between the dashed borders but unsuccessful. Also, i want to increase the width of each dash here but i am unable to do so.

The current code is as follows

-- HTML --
<th colspan="2" key={indx}>

-- CSS --
th {
  padding: 1rem;
}

th[colspan] {
  border-top: 1px dashed black;
  border-bottom: 1px dashed black;
}

I am trying to do it as a inline styling. I tried the following

<th style={{ borderBottom: '1px dashed #000', borderTop: '1px dashed #000', margin: '10px 0' }}>

No matter how much i try to add margin: '10px 0', or padding or width and any border-spacing to the th style, i am unable to increase the spacing between each dash and increase width of each dash.

Can someone please let me know how to achieve this.

I am trying to achieve this way

CodePudding user response：

Edited answer - I had a thinking error in there previously:

You need to add the padding to the cells, not the row. To affect only the cells in the table heading row, you would basically write it as follows, since the first row contains the header cells (th), all others the regular cells (td):

th {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

It gets a bit more complicated if you also have th cells at other positions (for example all first cells in all rows as headings for the rows). But for a basic function, the above should suffice.

Concerning the question about inline CSS in your comment: Sure, but you'd have to add the style:padding-top:1rem;padding-bottom:1rem> attribute to each th.

CodePudding user response：

A simple answer would be to abandon trying to use the CSS border settings, which can vary between browsers, and go for total control of the spacing (either relative in relation to the width of the element or absolute in terms e.g. of px units) by using background image of a linear gradient.

Here's an example which uses % sizing, but you may want it to be in say em units in order to get it looking similar for a particular font size.

table thead tr {
  display: inline-block;
  padding: 1vmin;
  background-image: linear-gradient(to right, black 0 50%, transparent 50% 100%), linear-gradient(to right, black 0 50%, transparent 50% 100%);
  background-repeat: repeat no-repeat;
  background-size: 10% 1px;
  background-position: 0 0, 0 calc(100% - 1px);
  
}

<table><thead><tr><th colspan="2">PROJECT NAME</th><th colspan="2">BUILD</th></tr></thead></table>