How to have a sticky thead in a table

Question

I want the thead not to move while scrolling in the table, i cant set the overflow auto on the tbody so how can i fix that?

I already tried to do the style="overflow: auto; height: 650px;" on the tbody but it doesnt even work at all

<div class="row m-t-30">
    <div style="overflow: auto; height: 650px;" class="col-md-12">
        <div class="table-responsive m-b-40">
            <table id="productsTable" class="table table-borderless table-data3">
                <thead>
                <tr>
                    <th>Klant</th>
                    <th>Werknemer</th>
                    <th>Datum</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <?php
                foreach ($clients->getAllclients() as $client) {
                    echo '<tr>';
                    echo '<td>' . $client['client_name'] . '</td>';
                    echo '<td>' . $client['client_id'] . '</td>';
                    echo '<td>' . $client['client_address'] . '</td>';
                    echo '<td><button class="item" data-toggle="tooltip" data-placement="top" title="See" onclick="seeOrder(\'' . $client['client_id'] . '\')"><i style="font-size: 20px" class="zmdi zmdi-search"></i></button></td>';
                    echo '</tr>';
                }
                ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 1

You can use position: sticky; for table

table thead tr th {
  background-color: white;
  position: sticky;
  top: -1px;
}

Below is the demo for sticky thead

 table thead tr th { background-color: white; position: sticky; top: -1px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <table class="table"> <thead> <tr> <th>column1</th> <th>column2</th> <th>column3</th> <th>column4</th> </tr> </thead> <tbody> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> </tbody> </table>