JSFiddle - React, Tailwind, and code Playground

by Ritwika Das

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="outerdiv">
    <div id="innerdiv">
  <table>
    <tbody>
      <tr>
        <td class="static">Staticdfxc</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
      <tr>
        <td class="static">Static</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
        <td class="scroll">scroll</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

CSS

table{
  width: 600px;
}

.static{
  border: 1px solid red;
  width: 100px;
  word-wrap: break-word;
   position:absolute;
            width:5em;
            left:0;
            top:auto;
}

.scroll{
  border: 1px solid green;
  width: 500px;
}

#outerdiv {
            position: absolute;
            top: 0;
            left: 0;
            right: 5em;
        }
        #innerdiv {
            width: 100%;
            overflow-x:scroll;
            margin-left: 5em;
            overflow-y:visible;
            padding-bottom:1px;
        }
        .headcol {
            position:absolute;
            width:5em;
            left:0;
            top:auto;
            border-right: 0px none black;
            border-top-width:3px;
            /*only relevant for first row*/
            margin-top:-3px;
            /*compensate for top border*/
        }