材料设计表中的边框折叠

Question

如何添加类似内容：

border-collapse: collapse;

材料设计表中的

？

当我将边框代码添加到 .mat-cell ：

时

.mat-cell {
    border: 1px solid;
}

在某些地方，边框看起来像2px。

我想添加边框，因为我想在悬停时更改颜色。

Stackblitz： https://stackblitz.com/edit/angular-bmnxfa-jmgwnp

Answer 1

border-collapse上没有<div>。因此，您需要使用负边距并将悬停项目放在最上面：

.mat-cell {
  margin: 0 -1px -1px 0;
}

.mat-row {
  margin-right: 1px;
}
.mat-row:hover { 
  z-index: 1;
  position: relative;
}

https://angular-bmnxfa-r7x93a.stackblitz.io

Answer 2

现在建议在实际表上使用mat-table作为指令。

• https://material.angular.io/components/table/overview

现在，Flexbox方法通常被认为是“旧的”处理方式。许多事情都无法正常使用。

• https://material.angular.io/components/table/overview#tables-with-code-display-flex-code-

因此，如果您使用的是表格，那么应用样式只是...我想应用它即可。

<table mat-table class="myClassWithBorderCollapse" style="border-collapse: collapse;">