Material Design 表中的边框折叠答案

【问题标题】：Border-Collapse in Material Design TableMaterial Design 表中的边框折叠
【发布时间】：2018-08-18 08:40:59
【问题描述】：

如何添加类似的东西：

border-collapse: collapse;

在材料设计表中？

当我在 .mat-cell 中添加边框代码时：

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

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

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

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

【问题讨论】：

【解决方案1】：

<div>s 上没有 border-collapse。因此，您需要改用负边距并将悬停的项目置于顶部：

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

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

【讨论】：

【解决方案2】：

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

flexbox 方法现在主要被认为是“旧”的做事方式。很多事情都不能很好地使用它。

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

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

【讨论】：