JSFiddle - React, Tailwind, and code Playground

by Dai Duong

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<table class="scroll">
  <thead>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
      <th>Head 3</th>
      <th>Head 4</th>
      <th>Head 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Lorem ipsum dolor sit</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Lorem ipsum dolor sit amet</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
    </tr>
  </tbody>
</table>

CSS

table.scroll {
  border-spacing: 0;
  border: 2px solid black;
}

table.scroll tbody,
table.scroll thead { display: block; }

thead tr th { 
  height: 30px;
  line-height: 30px;
}

table.scroll tbody {
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}

tbody { border-top: 2px solid black; }

tbody td, thead th {
  border-right: 1px solid black;
}

tbody td:last-child, thead th:last-child {
  border-right: none;
}

JavaScript

var table = $('table.scroll'), bodyCells = table.find('tbody tr:first').children(),colWidth;

$(window).resize(function() {
  colWidth = bodyCells.map(function() {
    return $(this).width();
  }).get();

  table.find('thead tr').children().each(function(i, v) {
    //$(v).text() => Head 1 .. Head 2 .. etc
    //colWidth[i] => 150 ...
    //i => 1 ~ 5 
    //$(this).css("min-width", colWidth[i]);
    $(v).width(colWidth[i]);
  });    
}).resize();