ng-table 修复了 header 和滚动条

Question

我正在使用这个 NG-TABLE and having a hard time trying to modify CSS. I want fixed header and scroll bar for the data. I am using CSS in this link。

我的 html 看起来像这样。

<ng-table class="table-scroll" [config]="config"
          [rows]="rows" [columns]="columns">
</ng-table>

我打开了开发者工具，发现 table 滚动 css 不工作。

我发现了问题。用户代理 css 正在覆盖我的 css。 ng-table里面还有一个table和clss。我该如何覆盖它？

Answer 1

当您使用标准 class 属性时，它的值可以被 Angular 元素忽略。

使用 ngClass 会更好，因为它将其值附加到元素添加的任何类：

<ng-table [ngClass]="'table-scroll'" [config]="config" [rows]="rows" [columns]="columns">
</ng-table>

示例插件：https://plnkr.co/edit/d4uFrAsnRJqYMqiyLuTG?p=preview

第二个选项是将选择器从 .table-scroll thead ... 更改为通用 table 选择器 table thead ... etc，如果您没有其他 table将受到影响的页面。

Answer 2

由于结构有点不同，你可以调整你的CSS:

.table-scroll table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.table-scroll table tbody {
    max-height: 150px;
    overflow-y: auto;
    display: block;
    width: 100%;
    table-layout: fixed;
}

.table-scroll table tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.table-scroll table td {
    height: 47px; // needed in order to keep rows from collapsing
}

最终你可以添加!important到不能被覆盖的规则...

ng-table 修复了 header 和滚动条

ng-table fixed header and scroll bar

css

ngtable

angular