如何更改ngx-datatable表格第一列的显示颜色

你可以选择以下任意一种方式实现，不需要改动现有表格的核心绑定逻辑：

• 方案1：列配置绑定自定义类（推荐，维护性更好）
  1. 调整组件内的列配置数组，给第一列单独添加cellClass属性，绑定自定义样式类：

  // 你的列配置col
  col = [
    {
      prop: '第一列对应的字段key', // 替换为你实际绑定的字段名
      name: '第一列表头文本',
      cellClass: 'first-col-style' // 第一列专属样式类
    },
    // 其余列的原有配置保持不变
  ]
  

  2. 在组件对应的样式文件中写入自定义样式，Angular默认视图封装下需要用::ng-deep穿透组件样式隔离：

  /* 第一列数据单元格样式 */
  ::ng-deep .first-col-style {
    background: #f5f7fa; /* 替换为你需要的背景色 */
    color: #303133; /* 替换为你需要的文字颜色 */
  }
  /* 如需同步修改第一列表头样式，追加以下代码 */
  ::ng-deep .datatable-header-cell:first-child {
    background: #e4e7ed;
    color: #303133;
  }
  

• 方案2：纯CSS选择器匹配（无需修改TS逻辑）
  如果你不想调整现有列配置，直接用CSS结构伪类匹配第一列即可，直接在样式文件加以下代码：

  /* 第一列数据单元格 */
  ::ng-deep .datatable-body-cell:first-child {
    background: #f5f7fa;
    color: #303133;
  }
  /* 第一列表头单元格 */
  ::ng-deep .datatable-header-cell:first-child {
    background: #e4e7ed;
    color: #303133;
  }
  

注意：你当前表格加了striped斑马纹类，默认斑马纹样式优先级较高，如果自定义样式不生效，把选择器权重调高即可，比如改成::ng-deep td.first-col-style、::ng-deep td.datatable-body-cell:first-child就能覆盖默认样式。

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