JSFiddle - React, Tailwind, and code Playground

HTML

<table style="width:50%">
 <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>   
 </thead>
  <tbody>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>    
  </tbody>
  <tfoot>
    <tr>
      <th>total</th>
      <td></td>
      <td>282</td>
    </tr>
    
    
  </tfoot>
</table>

CSS

table {
  border-collapse: collapse;
}
tbody {
    border-bottom: 2px solid black;
    border-collapse: separate;
    border-spacing: 4px; 
}