使用 transform: scale(); 时如何修复 table 行的 z-index

Question

在 table 中，我想在悬停时缩放带有边框的行。但是，缩放的行一直在后台而不是在前台。我注意到，这只发生在 table 中，而不是列表标签（虽然无法更改 html）。

我尝试了很多不同的 CSS 技术，但其中 none 似乎有效。像 border-collapse、z-index 等。同样以 td 而不是 tr 为目标也不起作用。编辑：使用 position: absolute 打破了 table 布局。

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/

Answer 1

问题不在于该行显示在 z-index 中其他行的下方，而是 border-collapse 阻止正确绘制缩放行中的边框。
缩放的时候用transform: scale(2)之类的可以看的更清楚，重叠就很明显了

所以解决办法就是不用border-collapse: collapse.
基本上就是这样。如果您还希望边框看起来与 fiddle 中的边框相同，您将需要更多 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>

使用 transform: scale(); 时如何修复 table 行的 z-index

How to fix z-index of table rows when using transform: scale();

css

border

css-tables