Как исправить z-индекс строк таблицы при использовании transform: scale (); - PullRequest
Новая
       30

Как исправить z-индекс строк таблицы при использовании transform: scale ();

0 голосов
/ 05 января 2019

В таблице я хотел бы масштабировать строки с границами при наведении. Однако масштабированная строка продолжает оставаться на заднем плане, а не на переднем плане. Я заметил, что это происходит только в таблицах, а не с тегами списка (хотя я не могу изменить HTML).

Я пробовал много разных техник CSS, но ни одна из них, похоже, не работает. Как border-collapse, z-index и т. Д. Также не работает таргетинг на td вместо tr. Редактировать: используя позицию: абсолютный разрыв таблицы. 

tr {
  transition: all 0.24s;
  transform: scale(1);
}

tr:hover {
  transform: scale(1.03);
  z-index: 10;
}

<normal table html layout table, tbody, tr, td>

На скриншоте показан фактический результат - ряд со сдвигом остается позади других рядов, следовательно, более тонкие границы. Ожидаемый результат должен показывать полную границу 1px перед границами других строк.

http://jsfiddle.net/djpcgmn0/

1 Ответ

0 голосов
/ 06 января 2019

Проблема не в том, что строка отображается под другими строками в z-index, а в том, что border-collapse препятствует правильному отображению границ в увеличенной строке.
Вы можете увидеть проблему более четко, если вы используете transform: scale(2) или что-то еще при масштабировании, тогда перекрытие очевидно.

Таким образом, решение состоит в том, чтобы не использовать border-collapse: collapse.
Вот и все. Если вы также хотите, чтобы границы выглядели так же, как в скрипке, вам понадобится еще немного CSS, но это не проблема. 

table {
  border-spacing: 0;
  /*border-collapse: collapse;*/  /* not used */
  table-layout: fixed;
}

tr {
  transition: all 1s;
}

tr:hover {
  transform: scale(1.1)
}

td {
  background: grey;
  border-bottom: 2px solid lightgreen;
  border-right: 2px solid white;
}

/* new from here */

tr:first-child td, tr:hover td {
  border-top: 2px solid lightgreen;
}

td:first-child {
  border-left: 2px solid white;
}
<table>
  <tbody>
    <tr>
      <td>Row 1 data cell 1</td>
      <td>Row 1 data cell 2</td>
      <td>Row 1 data cell 3</td>
    </tr>
    <tr>
      <td>Row 2 data cell 1</td>
      <td>Row 2 data cell 2</td>
      <td>Row 2 data cell 3</td>
    </tr>
    <tr>
      <td>Row 3 data cell 1</td>
      <td>Row 3 data cell 2</td>
      <td>Row 3 data cell 3</td>
    </tr>
  </tbody>
</table>
...