Bootstrap table fixed header

by bairog

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="table-responsive">
  <table class="table table-fixed">
    <thead>
      <tr>
        <th scope="col" class="col-3">#</th>
        <th scope="col" class="col-3">First</th>
        <th scope="col" class="col-3">Last</th>
        <th scope="col" class="col-3">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" class="col-3">1</th>
        <td class="col-3">Mark</td>
        <td class="col-3">Otto</td>
        <td class="col-3">@mdo</td>
      </tr>
      <tr>
        <th scope="row" class="col-3">2</th>
        <td class="col-3">Jacob</td>
        <td class="col-3">Thornton</td>
        <td class="col-3">@fat</td>
      </tr>
      <tr>
        <th scope="row" class="col-3">3</th>
        <td colspan="2" class="col-6">Larry the Bird</td>
        <td class="col-3">@twitter</td>
      </tr>
      <tr>
        <th scope="row" class="col-3">4</th>
        <td class="col-3">Martin</td>
        <td class="col-3">Williams</td>
        <td class="col-3">@Marty</td>
      </tr>
      <tr>
        <th scope="row" class="col-3">5</th>
        <td colspan="2" class="col-3">Sam</td>
        <td colspan="2" class="col-3">Pascal</td>
        <td class="col-3">@sam</td>
      </tr>
      <tr>
        <th scope="row" class="col-3">6</th>
        <td class="col-3">John</td>
        <td class="col-3">Green</td>
        <td class="col-3">@john</td>
      </tr>
      <tr>
        <th scope="row" class="col-3">7</th>
        <td colspan="2" class="col-3">David</td>
        <td colspan="2" class="col-3">Bowie</td>
        <td...

CSS

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
.table-fixed tbody {
    height: 300px;
    overflow-y: auto;
    width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
    display: block;
}

.table-fixed tbody td,
.table-fixed tbody th,
.table-fixed thead > tr > th {
    float: left;
    position: relative;

    &::after {
        content: '';
        clear: both;
        display: block;
    }
}