时间戳

首页 > 解决方案 > 使引导表标题具有无限表高或大型数据集的粘性

html - 使引导表标题具有无限表高或大型数据集的粘性

问题描述

背景：我正在制作一个响应式 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 解决方案受到社区的赞赏。

标签： htmlcssangularbootstrap-4bigdata

解决方案

推荐阅读