表格规模转换的背景颜色问题

Question

我在对悬停效果应用比例时遇到问题。

在悬停时更改背景时，<td>元素上没有分离，但在应用比例变换时会出现：

悬停时的基本背景颜色变化

悬停时

缩放，<td>

之间会出现一些分隔

table tr:hover {
   background: rgba( 221, 51, 51, .4);
   transform: scale(1.1);
}

有没有办法防止这种情况或解决它？

＆＃13;

＆＃13;

table {
  min-width:360px;
  margin: 0 auto;
  border-spacing: 0;
  border-collapse: collapse;
}


table tr {
  transition: .2s;
}

table tr:hover {
  background: rgba( 221, 51, 51, .4);
  transform: scale(1.1);
}

＆＃13;

<table>
<tr>
<td>sample</td>
<td>text</td>
<td>1</td>
</tr>
<tr>
<td>sample</td>
<td>text</td>
<td>2</td>
</tr>
<tr>
<td>sample</td>
<td>text</td>
<td>3</td>
</tr>
<tr>
<td>sample</td>
<td>text</td>
<td>4</td>
</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我玩弄了你的现场例子并注意到它只是在桌子相当宽时才显示出那条线。在检查器中切换一些样式也表明当你关闭时：

border-collapse: collapse;

它默认回到：

border-collapse: separate;

线路消失了。 separate是此值的默认值，因此只需覆盖collapse值或完全删除它就可以了。