Space between horizontal an vertical border in table is ignored

Question

I am trying to get a space of ~20 px between the red tr border and the blue border of the table but only in the tbody not it in the thead. I tried to use padding on the tr but this does not work.

table {
  width: 100%;
  border: 3px solid blue;
   border-collapse: collapse;
}

thead {
  background-color: green;
}
tr {
 height:50px;
}

tr {
  box-sizing: border-box;
  border-bottom: 2px solid red;
}

<table>
  <thead>
    <tr>
      <td>FooHead</td>
      <td>BarHead</td>
      <td>BazHead</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
  </tbody>
</table>

Any suggestions?

Answer 1

I would try to use :after of <td> selector to display the bottom line instead of using <tr> border But this would be a bit tricky.

However, with this trick, you can apply a padding-left to your first column (the bottom line will follow).. And you can change the width of the last td:after with a calc(100 - 20px)

table {
  width: 100%;
  border: 3px solid blue;
   border-collapse: collapse;
}

thead {
  background-color: green;
}
tr {
 height:50px;
}

tr {
  box-sizing: border-box;
}
tbody td {
  position: relative;
}
tbody td:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: red;
  bottom: 0;
}
tbody tr:last-of-type td:after {
  display: none;
}
td:first-of-type {
  padding-left: 20px;
}

tbody td:last-of-type:after {
  width: calc(100% - 20px);
}

<table>
  <thead>
    <tr>
      <td>FooHead</td>
      <td>BarHead</td>
      <td>BazHead</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
  </tbody>
</table>

Answer 2

One trick you can use is to scale the trs in the tbody horizontally, so that they no longer are as wide as the table.
If you do that, you'll have to adjust some of the other CSS as well; for instance you can no longer use border-collapse: collapse, since this makes the horizontal lines connect to the vertical.

table {
  width: 100%;
  border: 3px solid blue;
  border-spacing: 0;
}

thead {
  background-color: green;
}

tr {
  height: 50px;
  border-bottom: 2px solid red;
}

tbody tr {
  transform: scaleX(.95);
}

tbody td {
  border-bottom: 2px solid red;
}

<table>
  <thead>
    <tr>
      <td>FooHead</td>
      <td>BarHead</td>
      <td>BazHead</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
      <td>Baz</td>
    </tr>
  </tbody>
</table>