JSFiddle - React, Tailwind, and code Playground

by kirky93

HTML

<div id="fixedContainer">
  <table class="fixed" id="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>


<div class="scrolly">
  <table class="inner_scrolly" id="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...

CSS

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

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

.fixed {
  background-color: lightblue;
}

#fixedContainer {
  position: absolute;
  top: 0px;
  left: 0px;
  //padding-right: 15px;
}

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

.inner_scrolly {
  background-color: pink;
}

JavaScript

var iw = document.getElementById("scrolly").offsetWidth;
var ow = document.getElementById("fixed").offsetWidth;

document.getElementById("fixedContainer").style.paddingRight = (ow - iw).toString() + "px";