css - 修复我的表的标题

Question

我想固定表格的标题，以便在向下滚动时始终可见。我的 table 的高度将固定为 500 像素。
这是一个笨蛋: enter link description here

 <table class="table table-striped table-bordered">
  <thead>
      <tr>
          <th style="text-align:center">Produit</th>
          <th style="text-align:center">Emballage</th>
          <th style="text-align:center">Certificat Fourn.</th>
          <th style="text-align:center">Marque</th>
          <th style="text-align:center">Catégorie</th>
          <th style="text-align:center">Calibre</th>
          <th style="text-align:center" colspan="3">20/03</th>
          <th style="text-align:center" colspan="3">21/03</th>
          <th style="text-align:center" colspan="3">22/03</th>
          <th style="text-align:center" colspan="3">23/03</th>
      </tr>
      <tr>
        <th colspan="6"></th>
        <th>Rsr</th>
        <th>Arr</th>
        <th>Dsp</th>
        <th>Rsr</th>
        <th>Arr</th>
        <th>Dsp</th>
        <th>Rsr</th>
        <th>Arr</th>
        <th>Dsp</th>
        <th>Rsr</th>
        <th>Arr</th>
        <th>Dsp</th>
      </tr>
  </thead>
  <tbody>
      <tr ng-repeat="planning in data">
          <td style="text-align:center">
              {{planning.produit}}
          </td>
          <td style="text-align:center">                                    
              {{planning.emballage}}
          </td>
          <td style="text-align:center">                                    
              {{planning.certificatFournisseur}}
          </td>
          ...

          <td style="text-align:center">
              {{planning.dispJ4}}
          </td>
      </tr>
  </tbody>
</table>

我已经在网上查过了，但我没有找到任何好的解决方案。
感谢您的帮助。

Answer 1

您必须将表格拆分为一个包含标题的表格和另一个包含数据的表格。然后在滚动中添加 javascript(检测标题表的位置是否靠近屏幕的 0，如果是，则为标题表添加 css 样式 -> position:fixed top:0px ;您还将有一个用于删除位置的反向 javascript:当查看器向上滚动时已修复。

编辑

如果您不在乎从页面中丢失表格，您可以使用 2 个表格(标题和内容)将内容表格的高度 = 500px - 标题表格的高度和内容表格的 css overflow:scroll