JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<tr>
<th>blah</th>
<th>fwee</th>
<th>spoon</th>
</tr>
</thead>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
</table>
CSS
table {
border-collapse:separate;
border:solid black 1px;
border-radius:6px;
-moz-border-radius:6px;
}
td, th {
border-left:solid black 1px;
border-top:solid black 1px;
padding: 5px;
background-color: gray;
color: white;
}
th {
background-color: blue;
border-top: none;
}
td:first-child, th:first-child {
border-left: none;
}
th:first-child { -moz-border-radius: 6px 0 0 0; }
th:last-child { -moz-border-radius: 0 6px 0 0; }
tr:last-child td:first-child { -moz-border-radius: 0 0 0 6px; }
tr:last-child td:last-child { -moz-border-radius: 0 0 6px 0; }