JSFiddle - React, Tailwind, and code Playground

HTML

<table cellspacing="0">
    
    <thead>
        <tr>
            <th>thead 1</th>
            <th>thead 2</th>
            <th>thead 3</th>
            <th>thead 4</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>tbody 1</td>
            <td>tbody 2</td>
            <th>tbody 3</th>
            <th>tbody 4</th>
        </tr>
    </tbody>
    
     <tfoot>
        <tr>
            <td>x1</td>
            <td>x2</td>
        </tr>
    </tfoot>
    
</table>

CSS

table {
    width: 100%;
    border-collapse: separate;
}
table td {
    border-top: 1px solid red;
}
thead {background: green;}
tbody {background: yellow;}
tfoot {background: red;}