JSFiddle - React, Tailwind, and code Playground

by Malik Naik

HTML

<table class="table-accordion">
  <tr>
    <td>Jill</td>
    <td>Sofia</td> 
    <td>50</td>
    <td>50</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
    <td>50</td>
    <td>50</td>
   </tr>
 </table>

CSS

th {
  background-color: $primary-color;
  color: $white;
  padding: 0;
  line-height: 2;
}

table {
  border-collapse: collapse;
  margin-top: 3%;
  table-layout: fixed;
}

tr {
  border-bottom: 1px solid black;
}

td {
  text-align: left;
  width: 5%; border: 1px solid #bbb;
}

td:nth-child(2) {
  width: 47.5%;
}

td:nth-child(3) {
  width: 15.8%;
}

td:nth-child(4) {
  width: 15.8%;
}

td:last-child {
  width: 15.8%;
}