JSFiddle - React, Tailwind, and code Playground

HTML

<table border="0" cellspacing="0" cellpadding="0">
<thead>
  <tr>
    <th><a href="#">Test1</a></th>
    <th>Test2</th>
    <th>Test3</th>
  </tr>
  <tr>
    <th>Test1</th>
    <th colspan="2">Test2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Test1</td>
    <td>Test2</td>
    <td>Test2</td>
  </tr>
</tbody>
</table>

CSS

table {
    border-collapse: collapse;
}

th, td {
  border: 1px solid red;
  margin: 0;
  padding: 5px;
}

thead th {
  position: relative;
  background: #feaaf0;
  top: 10px;
  z-index: 1;
}

thead th:before {
    content: '';
    position: absolute;
    border: 1px solid green;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
}