Как изменить размер <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>

Answer 2

Попробуйте этот код

.table td{
  transition:all 500ms;
}

.table tr:hover > td{
  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>