JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    
    body {
      margin: 0;
      background: #aaaaaa;
    }
    
    .container {
      max-width: calc(100% - 4em);
      width: fit-content;
      width: -moz-fit-content;
      height: 10em;
      overflow: hidden;
      margin: 2em;
      overflow: auto;
      padding-right: 8px;
    }
    
    .container > table {
      border-collapse: collapse;
      height: 100%;
      position: relative;
      background: beige;
      table-layout: fixed;
    }
    
    td, th {
      padding: 0.3em 0.5em;
    }
    
    th {
       background: white;
       position: sticky;
       top: 0;
       z-index: 1;
     }
    </style>
</head>
<body>
  <div class="container">
   <table>
   <thead>
     <tr>
       <th>Spalte 1</th>
       <th>Spalte 2</th>
     </tr>     
   </thead>
   <tbody>
     <tr>
       <td>Daten 1</td>
       <td>Daten 2</td>
     </tr>
     <tr>
       <td>Daten 1</td>
       <td>Daten 2</td>
     </tr>
     <tr>
       <td>Daten 1</td>
       <td>Daten 2</td>
     </tr>
     <tr>
       <td>Daten 1</td>
       <td>Daten 2</td>
     </tr>
     <tr>
       <td>Daten 1</td>
       <td>Daten 2</td>
     </tr>
     <tr>
       <td>Daten 1</td>
       <td>Daten 2</td>
     </tr>
     <tr>
       <td>Daten 1</td>
       <td>Daten 2</td>
     </tr>
     <tr>
       <td>Daten 1</td>
       <td>Daten 2</td>
     </tr>
     <tr>
       <td>Daten 1</td>
       <td>Daten 2</td>
     </tr>
     <tr>
       <td>Daten 1</td>
       <td>Daten 2</td>
     </tr>
     <tr>
       <td>Daten 1</td>
       <td>Daten 2</td>
     </tr>
     <tr>
       <td>Daten 1</td>
       <td>Daten 2</td>
     </tr>
     <tr>
       <td>Daten 1</td>
       <td>Daten 2</td>
     </tr>
     <tr>
       <td>Daten 1</td>
       <td>Daten 2</td>
     </tr>
     <tr>
       <td>Daten 1</td>
       <td>Daten 2</td>
     </tr>
   </tbody>
   </table>
  </div>
</body>
</html>