Question

我使用JS动态地向表格行添加边框。

这会导致表格略微跳跃，因为边框会为行添加高度。

我该如何防止这种情况？

我尝试添加透明边框，然后用真实边框替换。

这很有效，但我一直在寻找更好的解决方案，所以我尝试了：

box-sizing: border-box

这不起作用。

最佳解决方案是什么？

Answer 1

如果您不想使用透明边框（建议您使用它，不确定为什么不会这样做），您可以简单地给出与边框宽度相同数量的单元格填充，并在悬停时删除，例如

Demo Fiddle

td{
    padding:3px;
}
td:hover{
    border:3px solid;
    padding:0;
}

Answer 2

或者，如果您无法填补填充内容 - 并且您不需要支持IE8，那么您可以尝试修补box-shadow

td:hover {
    box-shadow: inset 0px 0px 0px 3px #111;
}