JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<table class="scroll">
  <thead>
    <tr>
      <th> Col 1 </th>
      <th> Col 2 </th>
      <th> Col 3 </th>
      <th> Col 4 </th>
      <th> Col 5 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Row 1 </td>
      <td> Row 1 </td>
      <td> Row 1 </td>
      <td> Row 1 </td>
      <td> Row 1 </td>
    </tr>
    <tr>
      <td> Row 2 </td>
      <td> Row 2 </td>
      <td> Row 2 </td>
      <td> Row 2 </td>
      <td> Row 2 </td>
    </tr>
    <tr>
      <td> Row 3 </td>
      <td> Row 3 </td>
      <td> Row 3 </td>
      <td> Row 3 </td>
      <td> Row 3 </td>
    </tr>
    <tr>
      <td> Row 4 </td>
      <td> Row 4 </td>
      <td> Row 4 </td>
      <td> Row 4 </td>
      <td> Row 4 </td>
    </tr>
    <tr>
      <td> Row 5 </td>
      <td> Row 5 </td>
      <td> Row 5 </td>
      <td> Row 5 </td>
      <td> Row 5 </td>
    </tr>    
  </tbody>
</table>

CSS

table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 80%;
}

.scroll thead, 
.scroll tbody { 
    display: block;
}

.scroll tbody {
    height: 40px;
    overflow-y: scroll;
    overflow-x: hidden;
}

td {
  
}