JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<thead>
    <tr>
        <th colspan=2>
            One
        </th>
        <th></th>
        <th colspan=2>
            Two
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            One
        </td>
        <td>
            Two
        </td>
        <td></td>
        <td>
            Three
        </td>
        <td>
            Four
        </td>
    </tr>
    <tr>
        <td>
            One
        </td>
        <td>
            Two
        </td>
        <td></td>
        <td>
            Three
        </td>
        <td>
            Four
        </td>
    </tr>
<tbody>
</table>

CSS

table {
    border-collapse: collapse;
    border-spacing: 1em;
}

table tbody tr {
    border-bottom: 1px solid black;
}

table thead tr th[colspan="2"]{
    border-bottom: 1px solid black;
    padding: 10px;
    text-align: center;
}

table tbody tr td {
    border-bottom: 1px solid black;
    padding: 10px;
}