html - Bootstrap Freeze thead on table

Question

I am trying to freeze my first row in my html table (thead) but when I try the following CSS code:

table {
    width: 100% !important;
}

thead, tbody {
    display: block;
}

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;
}

tbody {
    height: 500px;
    overflow-y: auto;
}

The thead is not the same size as the tbody. the tbody is scrollable to the thead is in a fixed position, but not the same, the tr's are bunched up together. Here is my HTML:

<table id="MVCGridTable_Grid" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
    </tbody>
</table>

Here is the DEMO I tried to put together, but the Bootstrap I added appears not to be working so excuse the lack of styling:

This is the result I get:

Answer 1

For this to work you need to wrap your table in an element with position: relative, a height or max-height (note some versions of IE have/had some trouble with calc() in max-height) translatable by browser into a physical size and to apply to each and every th/td inside your sticky <thead> the class of sticky-top or, if you prefer, the following CSS:

position: sticky;
top: 0;
z-index: 1020;

See it working:

"use strict";

var stickySituation = function stickySituation(o) {
  return $("".concat(o, " .sticky-top")).css('position') === 'fixed';
};

var updateStickyHeader = function updateStickyHeader(i, e) {
  var cell = $("tbody tr>*:nth-child(".concat(i + 1, ")"), $(e).closest('table')).eq(0)[0];

  if (cell) {
    var box = cell.getBoundingClientRect();
    $(e).css({
      top: 0,
      width: box.width,
      height: box.height,
      left: box.left
    });
  }
};

$(window).on('load', function () {
  var sh = '.table-responsive.sticky-headers';
  $('thead th').addClass('sticky-top bg-white');

  if (stickySituation(sh)) {
    $(sh).css({
      paddingTop: $('tbody tr>*:nth-child(1)', sh).eq(0).css('height')
    });
    $(window).on('resize', function () {
      $('thead th').each(updateStickyHeader);
    });
    $(window).trigger('resize');
  }
});

.table-responsive {
  max-height: 100vh;
  /* whatever makes sense */
  overflow-y: auto;
}

.table-responsive .sticky-top {
  border-top: 0;
  border-bottom: 0;
  box-shadow: 0 1px 0 0 gainsboro;
  /* hack for IE: */ position: fixed;
  position: sticky;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="table-responsive position-relative sticky-headers">
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">5</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">6</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
      <tr>
        <th scope="row">7</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">8</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">9</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>