Angular如何在滚动时固定表头

【问题标题】：Angular how to make table headers fixed when scrollingAngular如何在滚动时固定表头
【发布时间】：2019-11-24 09:20:01
【问题描述】：

我在 Angular 中有一个表格，我想在滚动时修复它的标题，但我无法获得所需的结果。每次其他元素未按应有的方式呈现时。

我尝试将固定的 css 类应用到 THEAD 的 TR，但我无法获得所需的结果

链接到我的堆栈闪电战： https://stackblitz.com/edit/angular-vpxuo1

【问题讨论】：

标签： angular bootstrap-4

【解决方案1】：

这适用于您提供的 stackblitz

CSS：

.table-fixed {
  width: 100%;
}

/*This will work on every browser but Chrome Browser*/
.table-fixed thead {
  position: sticky;
  position: -webkit-sticky;
  top: 0;

}

/*This will work on every browser*/
.table-fixed thead th {
    position: sticky;
    position: -webkit-sticky;
    top: 0;

}

HTML：

<table id="tableSortExample" mdbTable class="z-depth-1 table-fixed">
      <thead>
        <tr>
          <th aria-controls="tableSortExample" scope="col" class="blue-text pointer-hover" [mdbTableSort]="history"
            [sortBy]="headElements[0]">
            Type
            <mdb-icon fas icon="sort"></mdb-icon>
          </th>

更多信息请参考此链接：stackoverflow.com

【讨论】：