时间戳

首页 > 解决方案 > 如何在桌子上有粘性的头饰

php - 如何在桌子上有粘性的头饰

问题描述

我希望thead 在表格中滚动时不要移动，我无法在 tbody 上设置溢出自动，所以我该如何解决？

我已经尝试过 style="overflow: auto; height: 650px;" 在 tbody 上，但它甚至根本不起作用

<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>

标签： phphtmlcsshtml-tabledatatable

解决方案

您可以position: sticky;用于表

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

下面是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>

推荐阅读