如何在桌子上有粘性的头饰答案

【问题标题】：How to have a sticky thead in a table如何在桌子上有粘性的头饰
【发布时间】：2019-11-13 02:09:55
【问题描述】：

我希望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>

【问题讨论】：

标签： php html css html-table datatable

【解决方案1】：

您可以将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>

【讨论】：

它仍然对我不起作用，它只会是白色的，不会粘在顶部
@BoVerzaal 如果你为它制作一个有效的 sn-p 会很有帮助
@BoVerzaal 让它在你的情况下工作，你需要在你的结构中设置溢出 1 级 codepen.io/gc-nomade/pen/BgxzOm
删除你的css并用这个table thead tr th { position: sticky; top: -1px; background: lightblue; }@BoVerzaal替换它
@BoVerzaal 如果对您有帮助，请接受我的回答