当使用可滚动div(overflow:auto)时，左右边框不清晰

Question

我正在尝试为tr[mar-row]添加边框。它是一个工作文件，直到父表具有滚动条(overflow: auto(

Repro：https://stackblitz.com/edit/angular-9s1meu?file=src%2Fapp%2Ftable-基本样本.css

注释第2行的CCD_ 3，并且边界将完全可见。

有没有办法设置边框并保持父项可滚动？谢谢

Answer 1

您可以使用outline-offset: -2px按轮廓的宽度移动轮廓。因为outline绘制在元素边界之外，所以当设置overflow: auto时，左侧和右侧将被隐藏——outline不是元素实际高度/宽度的一部分。

或者，使用border，以便将样式绘制为高度/宽度计算的一部分。虽然tr.selected {border: 1px solid black}并没有立即发挥作用，但它是通过针对儿童来发挥作用的：

tr.selected td {
border-top: 2px solid red;
border-bottom: 2px solid red;
}
tr.selected td:first-child {
border-left: 2px solid red;
}
tr.selected td:last-child {
border-right: 2px solid red;
}