Material Design Table如何实现边框合并？添加Hover变色边框遇2px问题

我来帮你搞定这个Material Table的边框问题～你遇到的2px边框，本质是相邻单元格的边框叠加导致的，咱们用下面的方法就能轻松解决，同时实现hover时边框变色的效果：

核心思路 #

Material Table默认采用类似原生表格的布局，咱们可以利用CSS的border-collapse属性让相邻单元格的边框合并，避免叠加；再通过行hover事件统一修改单元格的边框颜色。

具体实现代码 #

在你的组件样式（.component.css）或者全局样式中添加以下代码：

/* 让表格边框合并，解决相邻单元格边框叠加成2px的问题 */
.mat-table {
  border-collapse: collapse;
  width: 100%; /* 可选，让表格占满容器宽度 */
}

/* 给所有单元格设置默认边框 */
.mat-cell, .mat-header-cell {
  border: 1px solid #e0e0e0; /* 浅灰色默认边框，可自定义 */
  padding: 12px; /* 调整内边距，让内容更美观 */
}

/* 鼠标悬停行时，修改所有单元格的边框颜色 */
.mat-row:hover .mat-cell {
  border-color: #1976d2; /* Material蓝色主题色，换成你想要的颜色即可 */
}

为什么这样有效？ #

• border-collapse: collapse会让表格的相邻边框合并为单一边框，彻底解决你之前遇到的2px边框问题；
• 给.mat-row:hover .mat-cell设置边框颜色，能让鼠标悬停时整行的单元格边框统一变色，视觉效果更连贯；
• 同时给表头单元格（.mat-header-cell）加边框，能让整个表格的边框风格保持一致。

如果你的表格有特殊需求（比如只需要部分边框），也可以调整边框的方向，比如只给单元格设置border-bottom和border-right，然后给第一行加border-top、第一列加border-left，但这种方式不如border-collapse简洁通用。

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