如何为p-table首列设置独立颜色并实现其余列间隔配色

前置修改 #

首先保留原有表格网格线样式，新增自定义样式类避免全局样式污染，将原[styleClass]配置修改为：
[styleClass]="'p-datatable-gridlines custom-col-table'"

样式配置 #

方案1：CSS伪类实现（适合固定列场景，无需修改列定义） #

如果你的表格列是固定的、没有动态隐藏/拖拽排序等操作，直接用伪类选择器即可，样式可以写入全局样式文件，或者在Angular组件样式中配合::ng-deep使用：

/* 第一列统一配色，覆盖默认样式 */
.custom-col-table .p-datatable-thead > tr > th:first-child,
.custom-col-table .p-datatable-tbody > tr > td:first-child {
  background-color: #e3f2fd; /* 按需替换为目标颜色 */
  color: #1976d2; /* 可同步修改文字颜色 */
}

/* 剩余奇数列配色（对应表格整体列索引为3、5、7...） */
.custom-col-table .p-datatable-thead > tr > th:nth-child(odd):not(:first-child),
.custom-col-table .p-datatable-tbody > tr > td:nth-child(odd):not(:first-child) {
  background-color: #f5f5f5;
}

/* 剩余偶数列配色（对应表格整体列索引为2、4、6...） */
.custom-col-table .p-datatable-thead > tr > th:nth-child(even),
.custom-col-table .p-datatable-tbody > tr > td:nth-child(even) {
  background-color: #fafafa;
}

如果要保留行hover、选中态的样式优先级，可以给上述选择器加:not(.p-highlight):not(:hover)后缀过滤特殊状态。

方案2：自定义列类实现（适合动态列/有列操作场景） #

如果表格列是动态生成、或者支持列隐藏/拖拽排序，伪类选择器会出现匹配错乱，直接给第一列单独加样式类更稳定：

1. 给第一列的p-column/p-tableColumn配置添加属性：
   styleClass="first-col"
2. 剩余列循环生成时按索引奇偶加col-odd/col-even类，样式对应修改为：

.custom-col-table .first-col {
  background-color: #e3f2fd;
}
.custom-col-table .col-odd {
  background-color: #f5f5f5;
}
.custom-col-table .col-even {
  background-color: #fafafa;
}

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