JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <th class="header1">Left</th>
        <th>Middle</th>
        <th class="header2">Right</th>
    </thead>
    <tbody>
        <td>----</td>
        <td>----</td>
        <td>----</td>
    </tbody>
</table>

CSS

table, table * {
    border-width: 0;    
}

table {
    border-spacing: 0;    
}

th { border-top:1px solid red; width:70px}
th, td {text-align:left; background-color:#cccccc}
th.header1 {border-top:1px solid red; border-left:1px solid red; border-top-left-radius:20px}
th.header2 {border-top:1px solid red; border-right:1px solid red; border-top-right-radius:20px}