Angular Material数据表如何添加列竖线以清晰展示单元格？

嘿，作为Angular新手能想到用Angular Material的Datatable来做类Excel的只读网格，思路很对！给列加竖线其实不用复杂的配置，靠简单的CSS就能轻松实现，我给你拆解几个实用的方案：

一、通用竖线：给所有列添加分隔线 #

Angular Material的表格默认没有竖线，我们可以给表头单元格（mat-header-cell）和数据单元格（mat-cell）添加右侧边框，再去掉最后一列的边框避免多余线条：

/* 给表头和数据单元格添加右侧竖线 */
.mat-header-cell, .mat-cell {
  border-right: 1px solid #e0e0e0; /* 浅灰色线条，可根据需求调整颜色/粗细 */
  padding: 8px 16px; /* 可选：调整单元格内边距，更贴近Excel的视觉感 */
}

/* 移除最后一列的右侧边框 */
.mat-header-cell:last-of-type, .mat-cell:last-of-type {
  border-right: none;
}

二、只读表格的额外优化 #

既然是只读的类Excel网格，我们可以再加几个样式让体验更贴合：

/* 禁止用户选中单元格文本 */
.mat-table {
  user-select: none;
}

/* 鼠标悬停时显示默认指针，而非文本选择指针 */
.mat-cell {
  cursor: default;
}

三、自定义特定列的竖线 #

如果需要给某几列设置特殊的竖线（比如更粗的线条、不同颜色），可以利用Angular Material自动生成的列类名（mat-column-xxx，xxx是你的列定义ID）：

比如你的列定义是这样的：

<ng-container matColumnDef="productId">
  <th mat-header-cell *matHeaderCellDef> 商品ID </th>
  <td mat-cell *matCellDef="let item"> {{item.productId}} </td>
</ng-container>

那你可以针对productId列单独设置竖线：

/* 给商品ID列的右侧加加粗的深灰色线条 */
.mat-column-productId {
  border-right: 2px solid #666;
}

注意事项 #

• 把这些CSS代码放在组件的styles.scss里（或者全局的styles.scss），如果用了组件的ViewEncapsulation，确保样式能生效（新手直接放组件styles里就好）；
• 线条的颜色、粗细都可以根据你的UI设计调整，比如用主题色替代灰色；

这样设置完，你的Angular Material表格就会有清晰的竖线分隔，完全符合只读类Excel网格的需求啦！

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