首页 文章

使用带有bootstrap 4的angular-cdk表

提问于
浏览 次
4

我正在使用Angular CDK table（没有Angular Material2）并想使用bootstrap table design来设置样式 .

可以将类添加到CDK表，但bootsstrap规则直接解决html表元素 tr ， td ，...和Angular CDK使用自定义标签 cdk-table ， cdk-row ， cdk-cell ...

作为快速而肮脏的解决方案，我使用来自bootstrap源的大量复制粘贴为cdk元素编写了自己的规则 . 但是，是否有一个很好的，可能更具前瞻性的解决方案来自动继承CDK表的引导规则？

angular sass bootstrap-4 angular-material2 angular-cdk

3 回答

  • 0

    我使用sass版本的bootstrap并为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); }
    回复于
  • 3

    我不相信有 . Cdk表实际上不是表元素 .

    回复于
  • 0

    您可以覆盖样式：.cdk-column -...列的名称... . 这是css类将在cdk-header-cell中插入最后一个...

    回复于

相关问题