JSFiddle - React, Tailwind, and code Playground

by Petr Haluza

HTML

<div id="table-scroll" class="table-scroll">
  <table id="main-table" class="main-table">
    <thead>
      <tr>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3</th>
        <th scope="col">Header 4</th>
        <th scope="col">Header 5</th>
        <th scope="col">Header 6</th>
        <th scope="col">Header 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Prvni 1/1</th>
        <td>První 1/2</td>
        <td>123456</td>
        <td>123456</td>
        <td>123456</td>
        <td>123456</td>
        <td>Poslední 1/8</td>
      </tr>
      <tr>
        <th>XZVUI123</th><td>Lorem ispum dolor 12345 asb, def, ghi</td>
        <td>123456</td><td>123456</td><td>123456</td><td>123456</td><td>Poslední 1/8</td>
      </tr>
      <tr>
        <th>XZVUI123</th><td>Lorem ispum dolor 12345 asb, def, ghi</td>
        <td>123456</td><td>123456</td><td>123456</td><td>123456</td><td>Poslední 1/8</td>
      </tr>
			<tr>
        <th>XZVUI123</th><td>Lorem ispum dolor 12345 asb, def, ghi</td>
        <td>123456</td><td>123456</td><td>123456</td><td>123456</td><td>Poslední 1/8</td>
      </tr>
			<tr>
        <th>XZVUI123</th><td>Lorem ispum dolor 12345 asb, def, ghi</td>
        <td>123456</td><td>123456</td><td>123456</td><td>123456</td><td>Poslední 1/8</td>
      </tr>
			<tr>
        <th>XZVUI123</th><td>Lorem ispum dolor 12345 asb, def, ghi</td>
        <td>123456</td><td>123456</td><td>123456</td><td>123456</td><td>Poslední 1/8</td>
      </tr>
			<tr>
        <th>XZVUI123</th><td>Lorem ispum dolor 12345 asb, def, ghi</td>
        <td>123456</td><td>123456</td><td>123456</td><td>123456</td><td>Poslední 1/8</td>
      </tr>
			<tr>
        <th>XZVUI123</th><td>Lorem ispum dolor 12345 asb, def, ghi</td>
        <td>123456</td><td>123456</td><td>123456</td><td>123456</td><td>Poslední 1/8</td>
      </tr>
			<tr>
        <th>XZVUI123</th><td>Lorem ispum dolor 12345 asb, def, ghi</td>
       ...

CSS

html {  box-sizing: border-box; font: 14px arial}
*,*:before,*:after {  box-sizing: inherit;}
.intro {  max-width: 800px;  margin: 1em auto;}
.table-scroll { position: relative; width:800px; z-index: 1; margin: auto; overflow: auto; height: 98vh;}
.table-scroll table { width: 100%; min-width: 1280px; margin: auto; border-collapse: separate; border-spacing: 0;}
.table-wrap { position: relative;}

.table-scroll th,
.table-scroll td { padding: 5px 10px; border: 1px solid #000; background: #fff; vertical-align: top;}
.table-scroll thead th { background: #333; color: #fff; position: -webkit-sticky; position: sticky; top: 0;}


th:first-child { position: -webkit-sticky; position: sticky; left: 0; z-index: 2; background: #ccc;}

thead th:last-child,
tbody td:last-child { position: -webkit-sticky; position: sticky; right: 0; z-index: 2;}

thead th:first-child,
thead th:last-child { z-index: 5;}