JSFiddle - React, Tailwind, and code Playground

by kirky93

HTML

<table class="fixed">
  <tbody>
    <tr>
       <td class="un">1</td>
       <td class="deux">2</td>
       <td class="trois">3</td>
       <td class="quatre">4</td>
       <td class="cinq">5</td>
    </tr>
  </tbody>
</table>

<div class="scrolly">
  <table class="inner_scrolly">
     <tbody>
    <tr>
       <td class="un">1</td>
       <td class="deux">2</td>
       <td class="trois">3</td>
       <td class="quatre">4</td>
       <td class="cinq">5</td>
    </tr>
    <tr>
       <td class="un">1</td>
       <td class="deux">2</td>
       <td class="trois">3</td>
       <td class="quatre">4</td>
       <td class="cinq">5</td>
    </tr>
    <tr>
       <td class="un">1</td>
       <td class="deux">2</td>
       <td class="trois">3</td>
       <td class="quatre">4</td>
       <td class="cinq">5</td>
    </tr>
    <tr>
       <td class="un">1</td>
       <td class="deux">2</td>
       <td class="trois">3</td>
       <td class="quatre">4</td>
       <td class="cinq">5</td>
    </tr>
    <tr>
       <td class="un">1</td>
       <td class="deux">2</td>
       <td class="trois">3</td>
       <td class="quatre">4</td>
       <td class="cinq">5</td>
    </tr>
    <tr>
       <td class="un">1</td>
       <td class="deux">2</td>
       <td class="trois">3</td>
       <td class="quatre">4</td>
       <td class="cinq">5</td>
    </tr>
    <tr>
       <td class="un">1</td>
       <td class="deux">2</td>
       <td class="trois">3</td>
       <td class="quatre">4</td>
       <td class="cinq">5</td>
    </tr>
    <tr>
       <td class="un">1</td>
       <td class="deux">2</td>
       <td class="trois">3</td>
       <td class="quatre">4</td>
       <td class="cinq">5</td>
    </tr>
    <tr>
       <td class="un">1</td>
       <td class="deux">2</td>
       <td class="trois">3</td>
       <td class="quatre">4</td>
       <td class="cinq">5</td>
    </tr>
    <tr>
       <td class="un">1</td>
       <td class="deux">2</td>
       <td class="trois">3</td>
       <td...

CSS

table td {
  height: 20px;
  border: 1px solid black;
  border-collapse: collapse;
}

table {
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
}

.fixed {
  background-color: lightblue;
  position: absolute;
  top: 0px;
  left: 0px;
}

.fixed tbody {
  padding-right: 17px;
}

.scrolly {
  position: absolute;
  top: 20px;
  left: 0px;
  width: 100%;
  height: calc(100% - 20px);
  overflow-y: auto;
}

.inner_scrolly {
  background-color: pink;
}