Question

背景：我正在制作一个响应式Angular 8应用程序，其中有一个非常大的数据集表。每个请求的数据应该以100行的块的形式到达。因此，桌子的高度不确定。我还将Bootstrap 4用作应用程序和此表的基础。该表具有不同的行为，并且我没有使用Angular材料或其他可用的库。

目标：由于该数据集很大，因此当用户在页面中向下滚动时，表格的标头应保持粘性，这一点很重要，因此用户可以跟踪自己在看什么

简而言之，下面的代码是我为stackoverflow修剪的代码

HTML代码

<div class="emp-result-container">
   <div class="table-responsive">
      <table class="table table-bordered table-hover table-fixed">
         <thead class="thead-dark">
             <tr>
                data
             </tr>
         </thead>
         <tbody>
             <tr *ngFor="let result of empSearchResult?.lines">
                <td>
                   {{ result }}
                </td>
             </tr>
         </tbody>
      </table>
   </div>
</div>

SASS

.emp-result-container {
    margin-left: 25px;
    margin-right: 25px;
    //max-height: 7300px;
    //overflow-y: auto;


  .table.table-hover.table-bordered {
      margin-top: 50px;
      width: 100%;
      border-collapse: collapse;
      //position: sticky;
      //top:0;
    }
 }

我已经阅读了几乎所有关于该主题的stackoverflow帖子，其中大多数都是关于一个有高度的桌子的，并且我也尝试过，因为您可以看到典型的CSS答案已被尝试并由我评论。他们都不在这里工作。

社区对这种大数据表的新颖CSS和Angular解决方案表示赞赏。

使引导程序表头保持粘性，不受高度限制的表或大数据集

0 个答案: