JSFiddle - React, Tailwind, and code Playground

by magicalex

HTML

<table border="1">
  <thead>
      <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <th>Col 4</th>
      </tr>
  </thead>
    <tbody>
  <tr>
    <td>Some datum</td>
    <td>Some other datum</td>
    <td>yet another datum</td>
    <td>the final bit of data</td>
  </tr>
    <tr>
    <td>Some datum</td>
    <td>Some other datum</td>
    <td>yet another datum</td>
    <td>the final bit of data</td>
  </tr>
    <tr>
    <td>Some datum</td>
    <td>Some other datum</td>
    <td>yet another datum</td>
    <td>the final bit of data</td>
  </tr>
    <tr>
    <td>Some datum</td>
    <td>Some other datum</td>
    <td>yet another datum</td>
    <td>the final bit of data</td>
  </tr>
    <tr>
    <td>Some datum</td>
    <td>Some other datum</td>
    <td>yet another datum</td>
    <td>the final bit of data</td>
  </tr>
    <tr>
    <td>Some datum</td>
    <td>Some other datum</td>
    <td>yet another datum</td>
    <td>the final bit of data</td>
  </tr>
    <tr>
    <td>Some datum</td>
    <td>Some other datum</td>
    <td>yet another datum</td>
    <td>the final bit of data</td>
  </tr>
    <tr>
    <td>Some datum</td>
    <td>Some other datum</td>
    <td>yet another datum</td>
    <td>the final bit of data</td>
  </tr>
    <tr>
    <td>Some datum</td>
    <td>Some other datum</td>
    <td>yet another datum</td>
    <td>the final bit of data</td>
  </tr>
  <tr>
    <td>Some datum</td>
    <td>Some other datum</td>
    <td>yet another datum</td>
    <td>the final bit of data</td>
  </tr>
    <tr>
    <td>Some datum</td>
    <td>Some other datum</td>
    <td>yet another datum</td>
    <td>the final bit of data</td>
  </tr>
    <tr>
    <td>Some datum</td>
    <td>Some other datum</td>
    <td>yet another datum</td>
    <td>the final bit of data</td>
  </tr>
    <tr>
    <td>Some datum</td>
    <td>Some other datum</td>
    <td>yet another datum</td>
    <td>the final bit of data</td>
  </tr>
    <tr>
    <td>Some datum</td>
    <td>Some other datum</td>
   ...

CSS

* {
  padding: 0!important;
   margin: 0!important;
    border-collapse: collapse;
}
#header {
    position: fixed;
    height: 20px;
    background: blue;
    width: 80%;
    z-index: 9;
}
table {
}
thead {
    background: blue;
    position: fixed;
    top: 0px;
    height: 40px;
    width: 80%;
    z-index: 10;
}
tbody {
    background: yellow;
    position: absolute;
    top: 40px;
    width: 80%;
    z-index: 0;
}
thead tr {
    background: red;
    width: 100%;
    display:block;
    height: 100%;
}
thead tr th:last-child {
}
thead tr {
}
tr {
    width: 100%;
    display: block;
}
td,th {
    display: inline-block;
    width: 21%;
}
th {
    height: 40px;
}
td {
    display: inline-block;
    height: 50px;
}
tr th:first-of-type,
tr td:first-of-type {
    width: 29%;
}
tr th:last-of-type,
tr td:last-of-type {
    width: 26%;
}