JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<table id="a">
  <thead>
    <tr>
      <th>one</th>
      <th>two</th>
      <th>three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    
    <tr>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    
    <tr>
      <td>13</td>
      <td>14</td>
      <td>15</td>
    </tr>
    
    <tr>
      <td>16</td>
      <td>17</td>
      <td>18</td>
    </tr>
  </tbody>
</table>


<table id="b">
  <thead>
    <tr>
      <th>one</th>
      <th>two</th>
      <th>three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    
    <tr>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    
    <tr>
      <td>13</td>
      <td>14</td>
      <td>15</td>
    </tr>
    
    <tr>
      <td>16</td>
      <td>17</td>
      <td>187656567576575755765</td>
    </tr>
  </tbody>
</table>

<div><table id="c">
  <thead>
    <tr>
      <th>one</th>
      <th>two</th>
      <th>three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
    
    <tr>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    
    <tr>
      <td>13</td>
      <td>14</td>
      <td>15</td>
    </tr>
    
    <tr>
      <td>16</td>
      <td>17</td>
      <td>187656567576575755765</td>
    </tr>
  </tbody>
</table></div>

CSS

table#a, table#b {
  border: 1px black solid;
  border-collapse: collapse;
  max-height: 100px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  width: 100%;
  overflow-y: auto;
  position: relative;
}

body {
  position: relative;
}

table#a th, table#a td {
  border: 1px black solid;
}

table#a thead, table#a tbody, table#a tr {
  display: contents;
}

table#b thead, table#b tbody {
  grid-column: 1/4;
  grid-template-columns: subgrid;
  position: relative;
  display: grid;
}

table#b tr {
  display: grid;
  grid-column: 1 / 4;
  grid-template-columns: subgrid;
}

table#b thead tr {
  background: red;
  position: sticky;
  top: 0;
}


table#c {
  width: 100%;
  position: relative;
  overflow: hidden;
}

div {
  overflow: auto;
  max-height: 100px;
}

table#c th {
  position: sticky;
  top: 0;
}