JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div id="table">
  <div role="row" id="header">
    <span role="cell">(index)</span>
    <span role="cell">A</span>
    <span role="cell">B</span>
    <span role="cell">C</span>
  </div>
  <div role="row">
    <span role="cell">1</span>
    <span role="cell">2</span>
    <span role="cell">3</span>
    <span role="cell">4</span>
  </div>
  <div role="row">
    <span role="cell">5</span>
    <span role="cell">6</span>
    <span role="cell">7</span>
    <span role="cell">8</span>
  </div>
  <div role="row">
    <span role="cell">5</span>
    <span role="cell">6</span>
    <span role="cell">7</span>
    <span role="cell">8</span>
  </div>
  <div role="row">
    <span role="cell">5</span>
    <span role="cell">6</span>
    <span role="cell">7</span>
    <span role="cell">8</span>
  </div>
  <div role="row">
    <span role="cell">5</span>
    <span role="cell">6</span>
    <span role="cell">7</span>
    <span role="cell">8</span>
  </div>
  <div role="row">
    <span role="cell">5</span>
    <span role="cell">6</span>
    <span role="cell">7</span>
    <span role="cell">8</span>
  </div>
  <div role="row">
    <span role="cell">5</span>
    <span role="cell">6</span>
    <span role="cell">7</span>
    <span role="cell">8</span>
  </div>
  <div role="row">
    <span role="cell">5</span>
    <span role="cell">6</span>
    <span role="cell">7</span>
    <span role="cell">8</span>
  </div>
  <div role="row">
    <span role="cell">5</span>
    <span role="cell">6</span>
    <span role="cell">7</span>
    <span role="cell">8</span>
  </div>
  <div role="row">
    <span role="cell">5</span>
    <span role="cell">6</span>
    <span role="cell">7</span>
    <span role="cell">8</span>
  </div>
  <div role="row">
    <span role="cell">5</span>
    <span role="cell">6</span>
    <span role="cell">7</span>
    <span role="cell">8</span>
  </div>
  <div role="row">
    <span role="cell">5</span>
    <span role="cell">6</span>
    <span role="cell">7</span>
    <span...

CSS

/*#table {
  display: grid;
  grid-template-columns: repeat(4, auto);
}

#table div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}*/

#table {
  width: 100%;
  max-height: 100px;
  overflow-y: auto;
  display: table;
  position: relative;
  border: black solid;
  border-width: 1px 1px 0 0;
}

#table div {
  display: table-row;
}

#table span {
  display: table-cell;
  border: black solid;
  border-width: 0 0 1px 1px;
}

#header {
  position: sticky;
  top: 0;
  background: white;
}