JSFiddle - React, Tailwind, and code Playground

by Oleh Kotsubko

HTML

<table>
<thead>
  <tr><td>1.1</td><td>1.2</td><td>1.3</td><td>dsvsdvsd</td></tr>
</thead>
    
    <tbody>
      <tr><td>2.1</td><td>2.2dfhfhdfhd dfh</td><td>2.3</td><td>dsvsdvsd</td></tr>
      <tr><td>3.1</td><td>3.2</td><td>3.77773</td><td>dsvsdvsd</td></tr>
    </tbody>
</table>

SCSS

table { border-collapse: separate; border-spacing: 0; width: 100%; max-width: 100%; }

tr {
  border: none;
}

tbody {
  
  td {
    border: solid 1px #000;
    border-style: none none solid none;
    padding: 10px;
    vertical-alighn: middle;
    }
  
    tr:first-child td:first-child { border-top-left-radius: 10px; }
    tr:first-child td:last-child { border-top-right-radius: 10px; }
    tr:last-child td:first-child { border-bottom-left-radius: 10px; }
    tr:last-child td:last-child { border-bottom-right-radius: 10px; }
    tr:first-child td { border-top-style: solid; }
    tr td:first-child { border-left-style: solid; width: 80%; }
    tr td:last-child {border-right: 1px solid #000;}
}