How resize <tr> without lose border bottom

Question

I need to resise the row in a tale. I use bootstrap so my table is:

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

I need to resize the row when the user move the cursor on this row so I do in my css

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

the problem is when I go on the row, the resize is correct but the border is disappear. Anyone can help me?

Answer 1

The problem comes from the border-collapse property of the table.

A lot of side effects comes from this property, like drop-shadow of the table that could be truncated for instance, or, merged borders as we can see here. Solution could be to change border-collapse to separate, like below

Side effect though is that cell separators are not merged anymore, which can change the aesthetic of your table. It seems (so far) that on this bootstrap component, rendering is not that different with this property.

Though, I suggest you should investigate deeper with that solution.

.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>