JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table-container">

  <table class="fixed_header">
    <colgroup style="width: 100%;">
      <col span="1" style="width: 50%;background-color:red">
      <col span="1" style="width: 25%;background-color:green">
      <col span="1" style="width: 25%;">
    </colgroup>

    <thead>
      <tr>
        <th>Factor</th>
        <th>y_i</th>
        <th>F_i</th>
      </tr>
    </thead>

    <tbody class="style-2">
      <tr>
        <td>row 1-0</td>
        <td>row 1-1</td>
        <td>row 1-2</td>
      </tr>
      <tr>
        <td>row 2-0</td>
        <td>row 2-1</td>
        <td>row 2-2</td>
      </tr>
      <tr>
        <td>row 3-0</td>
        <td>row 3-1</td>
        <td>row 3-2</td>
      </tr>
      <tr>
        <td>row 4-0</td>
        <td>row 4-1</td>
        <td>row 4-2</td>
      </tr>
      <tr>
        <td>row 5-0</td>
        <td>row 5-1</td>
        <td>row 5-2</td>
      </tr>
      <tr>
        <td>row 6-0</td>
        <td>row 6-1</td>
        <td>row 6-2</td>
      </tr>
      <tr>
        <td>row 7-0</td>
        <td>row 7-1</td>
        <td>row 7-2</td>
      </tr>
      <tr>
        <td>row 7-0</td>
        <td>row 7-1</td>
        <td>row 7-2</td>
      </tr>
      <tr>
        <td>row 7-0</td>
        <td>row 7-1</td>
        <td>row 7-2</td>
      </tr>
      <tr>
        <td>row 7-0</td>
        <td>row 7-1</td>
        <td>row 7-2</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.table-container {
    position: absolute;
    display: block;
    height: 94%;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    top: 15px;
}

.style-2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.style-2::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

.style-2::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #F4F7F7;
}



.fixed_header{
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}


.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  width: 200px;
}