JSFiddle - React, Tailwind, and code Playground

HTML

<table class="fixed">
  <thead>
    <tr>
       <th class="one">1</th>
       <th class="two">2</th>
       <th class="three">3</th>
       <th class="four">4</th>
       <th class="five">5</th>
       <th class="six">6</th>
       <th class="seven">7</th>
    </tr>
  </thead>
  <tbody>
      <tr>
         <td class="one">1</td>
         <td class="two">2</td>
         <td class="three">3</td>
         <td class="four">4</td>
         <td class="five">5</td>
         <td class="six">6</td>
         <td class="seven">7</td>
      </tr>
      <tr>
         <td class="one">1</td>
         <td class="two">2</td>
         <td class="three">3</td>
         <td class="four">4</td>
         <td class="five">5</td>
         <td class="six">6</td>
         <td class="seven">7</td>
      </tr>
      <tr>
         <td class="one">1</td>
         <td class="two">2</td>
         <td class="three">3</td>
         <td class="four">4</td>
         <td class="five">5</td>
         <td class="six">6</td>
         <td class="seven">7</td>
      </tr>
      <tr>
         <td class="one">1</td>
         <td class="two">2</td>
         <td class="three">3</td>
         <td class="four">4</td>
         <td class="five">5</td>
         <td class="six">6</td>
         <td class="seven">7</td>
      </tr>
      <tr>
         <td class="one">1</td>
         <td class="two">2</td>
         <td class="three">3</td>
         <td class="four">4</td>
         <td class="five">5</td>
         <td class="six">6</td>
         <td class="seven">7</td>
      </tr>
      <tr>
         <td class="one">1</td>
         <td class="two">2</td>
         <td class="three">3</td>
         <td class="four">4</td>
         <td class="five">5</td>
         <td class="six">6</td>
         <td class="seven">7</td>
      </tr>
      <tr>
         <td class="one">1</td>
         <td class="two">2</td>
         <td class="three">3</td>
         <td class="four">4</td>
         <td class="five">5</td>
         <td...

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

table tbody {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

table thead {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-right: 17px;
}

table td, th {
  height: 20px;
  border: 1px solid black;
}

.one {
  min-width: 30px;
  max-width: 30px;
  background-color: yellow;
}

.two {
  min-width: 30px;
  max-width: 30px;
  background-color: orange;
}

.three {
  min-width: 30px;
  max-width: 30px;
  background-color: red;
}

.four {
  width: 100%;
}

.five {
  min-width: 100px;
  max-width: 100px;
  background-color: green;
}

.six {
  min-width: 100px;
  max-width: 100px;
  background-color: lightblue;
}

.seven {
  min-width: 100px;
  max-width: 100px;
  //border-right: 3px solid transparent;
}