Question

我在Angular中有一张桌子，我想在滚动时固定它的标头，但我无法获得所需的结果。每次都没有像应有的形式呈现另一个元素。

我试图将固定且粘滞的CSS类应用于THEAD的TR，但是我无法获得预期的结果

链接到我的stackblitz： https://stackblitz.com/edit/angular-vpxuo1

Answer 1

这可以与您提供的堆叠闪电战一起使用

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

Angular如何在滚动时固定表格标题

1 个答案: