JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/table.css">
<div class="outerTable">
   <table class="ui celled selectable sortable striped unstackable table">
      <thead class="">
         <tr class="">
            <th class="">A</th>
            <th class="">B</th>
            <th class="">C</th>
         </tr>
      </thead>
      <tbody class="">
         <tr class="">
            <td class="">A</td>
            <td class="">B</td>
            <td class="">C</td>
         </tr>
         <tr class="">
            <td class="">A</td>
            <td class="">B</td>
            <td class="">C</td>
         </tr>
         <tr class="">
            <td class="">A</td>
            <td class="">B</td>
            <td class="">C</td>
         </tr>
         <tr class="">
            <td class="">A</td>
            <td class="">B</td>
            <td class="">C</td>
         </tr>
      </tbody>
   </table>
</div>

CSS

.outerTable table {
  width: 98% !important;
  table-layout:fixed;
}

.outerTable tbody, .outerTable thead tr { display: block; }

.outerTable tbody {
  height: calc(100vh - 150px);
  overflow-y: auto;
  overflow-x: hidden;
}

.outerTable tbody td, .outerTable thead th {
  width: 33% !important;
}

.outerTable thead th:last-child, .outerTable tbody tr td:last-child{
  width: 600px !important;
}