JSFiddle - React, Tailwind, and code Playground

by Paolo Angioletti

HTML

<table>
    <thead>
      <tr>
        <th>head1</th>
        <th>head2</th>
        <th>head3</th>
        <th>head4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
        <td>cell 4</td>
      </tr>  
    </tbody>
  </table>

CSS

table {
    table-layout: fixed;
    width: 400px;
}
thead tr {
    display: block;
}
td, th {
    width: 100px;
    text-align: left;
}
tbody {
    display: block;
    height: 256px;
    overflow-y: auto;
}

/* more styles to make it look prettier here ... */

JavaScript

// for demonstration purposes
// clone the only row one hundred of times 
// just to make the table bigger
var tbody = document.querySelector('tbody');
var tr = tbody.querySelector('tr');
for (var k = 0; k < 100; k++) {
    var cloned = tr.cloneNode(true);
    tbody.appendChild(cloned);
}