Kevin Powell - Community•3mo ago

Issue with Applying space between table body rows

Trying to make space between table rows just like in the image Any workaround to achieve this codepen: https://codepen.io/Omar-Abroum/pen/gbpKVyj

Omar Abroum

CodePen

make spaces between table rows

...

14 Replies

ἔρως•3mo ago

you have to set a padding on the <td> i see you're applying the padding, but you're not applying to the sides you have to do it for all the sides also, you can just use grid for the <tbody> and <thead>

omar_ab(@om4rAb)OP•3mo ago

but applying padding to all sides to td won't give me the white space between the rows

ἔρως•3mo ago

it will

omar_ab(@om4rAb)OP•3mo ago

I just set

td {
  padding: 1em 2em;
}

omar_ab(@om4rAb)OP•3mo ago

still no space between the rows

ἔρως•3mo ago

that is the spacing

omar_ab(@om4rAb)OP•3mo ago

this what I want to achieve

ἔρως•3mo ago

good luck

Chris Bolson•3mo ago

You could set border-collpase:separate on the table. However you would then have to move the (red) border lines to the cells rather than the rows. To then remove the dividing lines between the cells, you just define top and bottom borders on all the cells and specifically add a left border to the first cell and a right border to the last cell.

table {
  width: 50%;
  text-align: left;

  border-collapse: seperate;
  border-spacing: 0 10px;
}
tr {
  /*border: 1px solid red;*/
}

td {
  padding: 1em 2em;
  
  border: 1px solid red;
  border-inline:none;
}
td:first-child{
  border-left: 1px solid red;
}
td:last-child{
  border-right: 1px solid red;
}

table {
  width: 50%;
  text-align: left;

  border-collapse: seperate;
  border-spacing: 0 10px;
}
tr {
  /*border: 1px solid red;*/
}

td {
  padding: 1em 2em;
  
  border: 1px solid red;
  border-inline:none;
}
td:first-child{
  border-left: 1px solid red;
}
td:last-child{
  border-right: 1px solid red;
}

Chris Bolson•3mo ago

ἔρως•3mo ago

i forgot about border spacing that does fit the bill

omar_ab(@om4rAb)OP•3mo ago

thank you so much chris

Gaming

Programming

Issue with Applying space between table body rows

Did you find this page helpful?