JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<table>
  <thead>
    <tr>
      <th colspan="7">Heading</th>
    </tr>
    <tr>
     <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
    </tr>
  </thead>
  <tbody>
    <tr><th colspan="7">Heading Row</th></tr>
    <tr>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
    </tr>
    <tr><th colspan="7">Heading Row</th></tr>
    <tr>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
    </tr>
    <tr><th colspan="7">Heading Row</th></tr>
    <tr>
      
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
    </tr>
    <tr><th colspan="7">Heading Row</th></tr>
    <tr>
      
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
    </tr>
    <tr><th colspan="7">Heading Row</th></tr>
    <tr>
     
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
      <td>Column</td>
    </tr>
  </tbody>
</table>

CSS

TH {
  FONT-WEIGHT: BOLD;
  background: beige;
  position: sticky;
  top: 0;
  left: 0;
}

td {
  padding: 5px;
}