JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr class="empty-row"></tr>
  <tr class="empty-row"></tr>
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr class="empty-row"></tr>
  <tr class="empty-row"></tr>
</table>

CSS

table tr td {
    height: 48px;
    border: 1px solid #A4AAB0;
    padding:  8px 16px;
    box-sizing:  border-box;
    border-collapse: collapse;
}

table tr th {
    border: 1px solid red;
}

table tr:empty + tr:not(:empty) td {
	border-top:1px solid red;
}

table tr td:first-child {
	border-left:1px solid red;
}

table tr td:last-child {
	border-right:1px solid red;
}

table tr:last-child td {
	border-bottom:1px solid red;
}