使用 angular-cdk table 和 bootstrap 4

Question

我正在使用 Angular CDK table (without Angular Material2) and want to use bootstrap table design 来设置样式。

可以将类添加到 CDK table，但引导程序规则直接处理 html table 元素 tr、td, ... 和 Angular CDK 使用自定义标签 cdk-table, cdk-row, cdk-cell ...

作为快速而肮脏的解决方案，我为 cdk 元素编写了自己的规则，其中包含来自 bootstrap 来源的大量复制粘贴。但是是否有一个很好的、也许更适合未来的解决方案来自动继承 CDK tables 的 bootstrap 规则？

Answer 1

我不相信有。 Cdk table 并不是真正的 table 元素。

Answer 2

我使用 bootstrap 的 sass 版本并为 cdk-table 添加以下样式取得了不错的效果：

.cdk-table { display: table; @extend table; }
.cdk-header-row { display: table-row; @extend thead; }
.cdk-header-cell { display: table-cell; @extend th; }
.cdk-row { display: table-row; @extend tr; }
.cdk-cell { display: table-cell; @extend td; }
.cdk-table.table-hover .cdk-row:hover { background-color: rgba(0, 0, 0, 0.075); }

Answer 3

您可以覆盖样式：.cdk-column-...列名...{ ...}。这是 css class 将最后插入 cdk-header-cell ...

Answer 4

我能够毫无困难地得到一个 cdk table 来使用 bootstrap 4。假设您安装了 bootstrap，在 .component.scss 文件中只需添加：

@import "~/bootstrap/scss/bootstrap"

您也可以将其添加到 styles.scss 文件中以使其成为全局文件。

然后在.component.html:

<table [datasource]="someDatasource" cdk-table class="table table-bordered">
...
</table>

使用 angular-cdk table 和 bootstrap 4

Use angular-cdk table with bootstrap 4

sass

bootstrap-4

angular-material2

angular

angular-cdk