JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<br/>


  <table class="fixed_header">
    <thead>
      <tr>
        <th>ID</th>
        <th>Firstname</th>
        <th>Surname</th>
        <th>DOB</th>
        <th style="width:20px;"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Tony</td>
        <td>Cross</td>
        <td>15/10/1981</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Tony</td>
        <td>Cross</td>
        <td>15/10/1981</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Tony</td>
        <td>Cross</td>
        <td>15/10/1981</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Tony</td>
        <td>Cross</td>
        <td>15/10/1981</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Tony</td>
        <td>Cross</td>
        <td>15/10/1981</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Tony</td>
        <td>Cross</td>
        <td>15/10/1981</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Tony</td>
        <td>Cross</td>
        <td>15/10/1981</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Tony</td>
        <td>Cross</td>
        <td>15/10/1981</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Tony</td>
        <td>Cross</td>
        <td>15/10/1981</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Tony</td>
        <td>Cross</td>
        <td>15/10/1981</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Tony</td>
        <td>Cross</td>
        <td>15/10/1981</td>
      </tr>
    </tbody>
  </table>

CSS

.fixed_header{
    table-layout: fixed;
    border-collapse: collapse;
    width: auto;
}

.fixed_header tbody{
  display:block;
  /*width: 100%;*/
  overflow: auto;
  height: 100px;
}

.fixed_header thead tr {
   display: block;
}

.fixed_header thead {
  background: black;
  color:#fff;
}

.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  /*width: 200px; */
}

table {
  border-collapse: collapse;
}

.fixed_header td, .fixed_header th {
  border: 1px solid green;
  
}

tr th:nth-child(1), tr td:nth-child(1) {
  width: 90px;
}

.fixed_header th:nth-child(2), .fixed_header tr td:nth-child(2) {
  width: 90px;
}

.fixed_header th:nth-child(3), .fixed_header tr td:nth-child(3) {
  width: 90px;
}

.fixed_header th:nth-child(4), .fixed_header tr td:nth-child(4) {
  width: 90px;
}