Как иметь липкую теаду в столе

Question

Я хочу, чтобы thead не двигался при прокрутке таблицы, я не могу установить автоматический переполнение на теле, так как я могу это исправить?

Я уже пытался сделать style = "overflow: auto; height: 650px;" на теле, но он даже не работает

<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

Вы можете использовать position: sticky; для стола

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

Ниже приведена демонстрация для липкой игры

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>