JSFiddle - React, Tailwind, and code Playground

by budyniowski

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<h4>Only Wrapper</h4>
<div class="tableWrapper">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Place</th>
        <th>Profesion</th>
        <th>Points</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>Poland</td>
        <td>Functional Consultant</td>
        <td>23</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane Doe</td>
        <td>Germany</td>
        <td>Manager</td>
        <td>50</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Michael Curtis</td>
        <td>Netherlands</td>
        <td>Developer</td>
        <td>30</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Jahn Smith</td>
        <td>Spain</td>
        <td>Sales Employee</td>
        <td>39</td>
      </tr>
    </tbody>
  </table>
</div>


<br>
<br>
<h4>Wrapper + white background color header class</h4>
<div class="tableWrapper">
  <table class="table">
    <thead class="whiteHeader">
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Place</th>
        <th>Profesion</th>
        <th>Points</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>Poland</td>
        <td>Functional Consultant</td>
        <td>23</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane Doe</td>
        <td>Germany</td>
        <td>Manager</td>
        <td>50</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Michael Curtis</td>
        <td>Netherlands</td>
        <td>Developer</td>
        <td>30</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Jahn Smith</td>
        <td>Spain</td>
        <td>Sales Employee</td>
        <td>39</td>
      </tr>
    </tbody>
  </table>
</div>


<br>
<br>
<h4>Wrapper + white background color header class + wrapper width smaller than...

CSS

.tableWrapper {
  overflow: auto;
  height: 100px;
}

.whiteHeader {
  background-color: #FFF;
}

.tableWrapper.narrow {
  width: 250px;
}

.tableWrapper.nowrap td,
.tableWrapper.nowrap th {
  white-space: nowrap;
}

JavaScript

function fixTables() {
    document.querySelectorAll('.tableWrapper').forEach((tableWrapper) => {
      tableWrapper.addEventListener('scroll', () => {
        var translate = 'translate(0,' + tableWrapper.scrollTop + 'px)'
        tableWrapper.querySelector('thead').style.transform = translate
      })
    })
  }

  fixTables()