JSFiddle - React, Tailwind, and code Playground

HTML

<div class="da-fixed-column-table-wrapper" data-ng-app="testModule" data-ng-controller="testController">


  <table class="da-fixed-column-table" border=1>
    <thead>
      <tr>
        <th>
          <button ng-click="show=!show">show-hide</button>
        </th>
        <th>Header2</th>
        <th>Header3</th>
        <th>Header4</th>
        <th>Header5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>first</td>
        <td>second</td>
        <td>third</td>
        <td>fourth</td>
        <td>fifth<span ng-show="show">more data</span></td>
      </tr>
      <tr>
        <td>first</td>
        <td>second</td>
        <td>third<span ng-show="show">more data</span></td>
        <td>fourth</td>
        <td>fifth</td>
      </tr>
      <tr>
        <td>first</td>
        <td>second<span ng-show="show">more data</span></td>
        <td>third</td>
        <td>fourth</td>
        <td>fifth</td>
      </tr>
      <tr>
        <td>first</td>
        <td>second</td>
        <td>third</td>
        <td>fourth<span ng-show="show">more data</span></td>
        <td>fifth</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.da-fixed-column-table-wrapper {
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  background: DarkKhaki;
}

.da-fixed-column-table {
  width: 500px;
  border-collapse: collapse;
  box-sizing: border-box;
  text-align: right;
}

.da-fixed-column-table tbody tr td:first-child,
.da-fixed-column-table thead tr th:first-child {
  position: absolute;
  border: none;
  top: auto;
  width: 8em;
  text-align: left;
  background: white;
}

.da-fixed-column-table thead tr th:nth-child(2),
.da-fixed-column-table tbody tr td:nth-child(2) {
  padding-left: 9em;
}

td span {
  background: teal;
}

JavaScript

var app = angular.module("testModule", []);
 app.controller('testController', function($scope) {

 });