JSFiddle - React, Tailwind, and code Playground

by Yusril Maulidan Raji

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<p>
  <button id="left">&larr;</button>
  <button id="right">&rarr;</button>
</p>

<div id="table-wrapper">
  <table border="1">
    <thead>
      <tr>
        <th>Heading1</th>
        <th>Heading2</th>
        <th>Heading3</th>
        <th>Heading4</th>
        <th>Heading5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1<br/>asdasdada</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
      </tr>
      <tr>
        <td>2<br/>asdasdada<br/>asdasdada</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
      </tr>
      <tr>
        <td>3<br/>asdasdada</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
        <td>35</td>
      </tr>
      <tr>
        <td>4<br/>asdasdada<br/>asdasdada<br/>asdasdada<br/>asdasdada<br/>asdasdada</td>
        <td>42</td>
        <td>43</td>
        <td>44</td>
        <td>45</td>
      </tr>
      <tr>
        <td>5<br/>asdasdada</td>
        <td>52</td>
        <td>53</td>
        <td>54</td>
        <td>55</td>
      </tr>
    </tbody>
  </table>

</div>

CSS

#table-wrapper {
  position: relative;
}
#table-wrapper table {
  text-align: center;
  table-layout: fixed;
  overflow-x: scroll;
  width: 1200px;
  border-collapse: collapse;
}
#table-wrapper table tr > *:first-child {
  width: 6em;
}
#table-wrapper table.overlay {
  position: absolute;
  top: 0;
  color: red;
  background-color: white;
  width: 6em;
}

JavaScript

var $overlayTable = $("#table-wrapper table").clone().addClass("overlay");
$overlayTable.find("tr > *:not(:first-child)").remove();
$overlayTable.appendTo("#table-wrapper");

$(window).on("scroll", function () {
    $overlayTable.css("left", $(window).scrollLeft() + "px");
});