使用可滚动div时左右边框消失（溢出：自动）答案

【问题标题】：border left and right dissapear when using scrollable div (overflow: auto)使用可滚动div时左右边框消失（溢出：自动）
【发布时间】：2021-09-19 21:07:32
【问题描述】：

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

复制：https://stackblitz.com/edit/angular-9s1meu?file=src%2Fapp%2Ftable-basic-example.css

在第 2 行注释 overflow: auto，边框将完全可见。

任何想法有边框并保持父级可滚动？谢谢。

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

您可以使用outline-offset: -2px 将轮廓移入宽度。因为outline 是在elements borders 之外绘制的，所以当设置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;
}

【讨论】：

感谢您的解释。现在你提到它，它似乎很明显。我认为可以通过添加另一个具有负边距的包装器来从源头解决问题。但与此同时，您的解决方案会做得很好。我什至不知道你可以对轮廓应用偏移，我总是使用阴影来制作内部边框。