ng-table固定标题和滚动条

Question

我正在使用此NG-TABLE并且很难尝试修改CSS。我想要数据的固定标题和滚动条。我正在使用CSS in this link。

我的HTML看起来像这样。

magic_quotes_gpc

我打开了开发人员工具，发现表滚动css无效。

我发现了这个问题。用户代理css正在覆盖我的CSS。在ng-table中，还有另一个表和clss。我怎样才能覆盖它？

Answer 1

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

与ngClass相比更好，因为它会将其值附加到元素添加的任何类中：

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

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

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

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添加到无法覆盖的规则中......