JSFiddle - React, Tailwind, and code Playground

by Andrey K

HTML

<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<div id="example1" style="overflow-x: auto;">

    <div class="ui sticky">
      <table>
        <thead><tr>
          <td>Col 1</td>
          <td>Col 2</td>
          <td>Col 3</td>
          <td>Col 4</td>
          <td>Col 5</td>
        </tr></thead>
      </table>
    </div>
    
    <div style="max-height: 200px; overflow: auto;">
    <table>
        <tbody>
          <tr>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data 1</td>
            <td>Data...

CSS

body {
  padding: 1em;
}

table td {
  padding: 1rem;
  width: 250px;
  border: 1px solid #ccc
}

JavaScript

$(".ui.sticky").sticky({
context: "#example1"
});