Bootstrap table fixed header

by Alvin Olavarrieta

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">
<!-- For demo purpose -->
<div class="container text-center text-white">
   
    <div class="container py-5">
        <div class="row">
            <div class="col-lg-7 mx-auto bg-white rounded shadow">

                <!-- Fixed header table-->
                <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"...

CSS

.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;
    }
}