如何为Angular CDK Table适配Bootstrap 4样式（无需Angular Material2）

我之前在项目里也碰到过一模一样的问题——用CDK Table但不想引入Material组件库，想直接复用Bootstrap的表格样式，复制源码确实太麻烦还不好维护。这里给你两个更优、且能兼容未来Bootstrap版本的实现方式：

方案一：SCSS 继承（推荐） #

如果你的项目使用Bootstrap的SCSS源码（不是编译好的CSS文件），这是最理想的方式，能直接复用Bootstrap的表格规则，不用复制任何源码：

1. 给CDK元素添加对应类和ARIA角色
   在模板里给CDK组件加上Bootstrap的基础类，同时补充ARIA角色保证无障碍访问：

   <cdk-table class="table table-hover" role="table">
     <!-- 表头行 -->
     <cdk-header-row *cdkHeaderRowDef="displayedColumns" class="table-header-row" role="row"></cdk-header-row>
     <!-- 数据行 -->
     <cdk-row *cdkRowDef="let row; columns: displayedColumns;" class="table-row" role="row"></cdk-row>
     <!-- 数据单元格 -->
     <cdk-cell *cdkCellDef="let element" class="table-cell" role="cell">{{ element.name }}</cdk-cell>
     <!-- 表头单元格 -->
     <cdk-header-cell *cdkHeaderCellDef class="table-header-cell" role="columnheader">{{ column }}</cdk-header-cell>
   </cdk-table>
   

2. 编写SCSS继承规则
   在你的组件SCSS或者全局样式文件里，让CDK的自定义元素继承Bootstrap原生表格元素的样式：

   // 让cdk-table继承Bootstrap table的基础样式
   .cdk-table.table {
     @extend table;
   }
   
   // 表头行继承tr的样式
   .cdk-header-row.table-header-row {
     @extend tr;
   }
   
   // 数据行继承tr的样式
   .cdk-row.table-row {
     @extend tr;
   }
   
   // 单元格和表头单元格继承td/th的样式
   .cdk-cell.table-cell,
   .cdk-header-cell.table-header-cell {
     @extend td, th;
   }
   

这个方案的核心优势：

• 完全复用Bootstrap的原生样式规则，不需要手动复制粘贴源码
• 当Bootstrap版本更新时，你的表格样式会自动同步最新的设计，无需手动修改
• 代码简洁，后续维护成本极低

方案二：纯CSS映射（适合引入Bootstrap CSS的项目） #

如果你的项目只引入了编译好的Bootstrap CSS文件，没法用SCSS的@extend语法，可以通过CSS属性选择器直接映射必要的样式：

/* 让cdk-table拥有table的基础布局 */
.cdk-table.table {
  display: table;
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  border-collapse: collapse;
}

/* 表头行和数据行的行级样式 */
.cdk-header-row, .cdk-row {
  display: table-row;
}

/* 单元格和表头单元格的基础样式 */
.cdk-cell, .cdk-header-cell {
  display: table-cell;
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

/* 表格条纹样式（按需添加） */
.cdk-table.table-striped .cdk-row:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 表格悬停效果（按需添加） */
.cdk-table.table-hover .cdk-row:hover {
  color: #212529;
  background-color: rgba(0, 0, 0, 0.075);
}

这种方式虽然需要手动写一部分样式，但比复制整个Bootstrap表格源码要精简得多——你只需要实现自己用到的样式（比如只写table-striped、table-hover这些你需要的），不用全部照搬。

额外提示 #

别忘了给CDK元素加上正确的ARIA角色（比如role="table"、role="row"），这不仅能让屏幕阅读器正确识别表格结构，也能让部分依赖原生元素语义的样式规则正常工作。

内容的提问来源于stack exchange，提问作者Moritz