时间戳

首页 > 解决方案 > Angular如何在滚动时固定表头

angular - Angular如何在滚动时固定表头

问题描述

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

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

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

标签： angularbootstrap-4

解决方案

This worked with your stackblitz you provided

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>

Reference this link for more information: stackoverflow.com

推荐阅读