如何在不丢失边框底部的情况下调整 <tr> 的大小

Question

我需要重新调整故事中的行。我使用引导程序，所以我的表是：

<table class="table">....</table>

当用户在这一行上移动光标时，我需要调整行的大小，所以我在我的 css 中做

tr:hover{
transform:scale(1.01);
}

问题是当我继续前进时，调整大小是正确的，但边框消失了。任何人都可以帮助我吗？

Answer 1

问题来自于表的border-collapse属性。

许多副作用都来自此属性，例如可以被截断的表格的阴影，或者我们可以在此处看到的合并边框。解决方案可能是更改border-collapse为separate，如下所示

但副作用是单元格分隔符不再合并，这可能会改变表格的美观。看起来（到目前为止）在这个引导组件上，渲染与这个属性没有什么不同。

不过，我建议您应该使用该解决方案进行更深入的调查。

.table {
  border-collapse: separate;
}

.table tr{
  transition:all 500ms;
}

.table tr:hover{
  transform:scale(1.05);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
<tr>
<tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
<tr>
<tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
<tr>
</table>