JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<table>
  <thead>
    <tr>
      <th>title 1</th>
      <th>TITLE 2</th>
      <th>TITI 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>4</td>
    </tr>    <tr>
      <td>11</td>
      <td>XX</td>
      <td>22</td>
    </tr>
        <tr>
      <td>S1</td>
      <td>S2</td>
      <td>a2</td>
    </tr>
  </tbody>
</table>

CSS

table {
  display:flex;
  width:100%;
}
th,td{
  border-top: 1px solid red; 
  border-right: 1px solid red; 
  width:80%;
  
}
tr:last-child {
 border-bottom: 1px solid red; 
}

thead {
 float:left;
  width:20%
}


thead th {
  display: block;   
  background: yellow;
}

tbody {
  float: right;
}