JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <table>
   <tr>
      <th class="headcol">1</th>
      <td class="long">AAAAA</td>
      <td class="long">BBBBB</td>
      <td class="long">CCCCC</td>
      <td class="long">DDDDD</td>
      <td class="long">EEEEE</td>
      <td class="long">FFFFF</td>
      <td class="long">GGGGG</td>
      <td class="long">HHHHH</td>
      <td class="long">.....</td>
      <td class="long">XXXXX</td>
      <td class="long">YYYYY</td>
      <td class="long">ZZZZZ</td>
    </tr>
    <tr>
      <th class="headcol">2</th>
      <td class="long">AAAAA</td>
      <td class="long">BBBBB</td>
      <td class="long">CCCCC</td>
      <td class="long">DDDDD</td>
      <td class="long">EEEEE</td>
      <td class="long">FFFFF</td>
      <td class="long">GGGGG</td>
      <td class="long">HHHHH</td>
      <td class="long">.....</td>
      <td class="long">XXXXX</td>
      <td class="long">YYYYY</td>
      <td class="long">ZZZZZ</td>
    </tr>
    <tr>
      <th class="headcol">3</th>
      <td class="long">AAAAA</td>
      <td class="long">BBBBB</td>
      <td class="long">CCCCC</td>
      <td class="long">DDDDD</td>
      <td class="long">EEEEE</td>
      <td class="long">FFFFF</td>
      <td class="long">GGGGG</td>
      <td class="long">HHHHH</td>
      <td class="long">.....</td>
      <td class="long">XXXXX</td>
      <td class="long">YYYYY</td>
      <td class="long">ZZZZZ</td>
    </tr>
    <tr>
      <th class="headcol">4</th>
      <td class="long">AAAAA</td>
      <td class="long">BBBBB</td>
      <td class="long">CCCCC</td>
      <td class="long">DDDDD</td>
      <td class="long">EEEEE</td>
      <td class="long">FFFFF</td>
      <td class="long">GGGGG</td>
      <td class="long">HHHHH</td>
      <td class="long">.....</td>
      <td class="long">XXXXX</td>
      <td class="long">YYYYY</td>
      <td class="long">ZZZZZ</td>
    </tr>
  </table>
</div>

CSS

body {
  font:16px Calibri;
}
div { 
  width: 600px; 
  overflow-x:scroll;  
  margin-left:5em; 
  overflow-y:visible;
  padding-bottom:1px;
  direction:rtl; //added
}

table { 
  border-collapse:separate; 
  border-top: 
  3px solid grey;
  direction:ltr; // needed so that column order is respected.
}

td, th {
  margin:0;
  border:3px solid grey; 
  border-top-width:0px; 
  white-space:nowrap;
}



.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*/
}

.headcol:before {content: 'Row ';}
.long { background:yellow; letter-spacing:1em; }