JSFiddle - React, Tailwind, and code Playground

by magicalex

HTML

<div id="header">this seems to work</div>
<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>
    </tbody>
</table>

CSS

* {
  padding: 0;
   margin: 0; 
}
#header {
    position: fixed;
    height: 20px;
    background: blue;
    width: 80%;
    border: 1px solid black;
    z-index: 9;
}
table {
}
thead {
    background: blue;
    position: fixed;
    top: 20px;
    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;
}
thead tr th:last-child {
}
thead tr {
}
td,th {
    display: inline-block;
    width: 19%; /*this is a silly amount but seems to be necessary*/
}
th {
    height: 20px;
    margin-right: -4px;
}
td {
    display: span;
    height: 100%;
}
tr th:first-of-type,
tr td:first-of-type {
    width: 30%;
}
tr th:last-of-type,
tr td:last-of-type {
    width: 30%;
}