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

Question

我正在尝试为 tr[mar-row] 添加边框。在 table 父级有滚动条 (overflow: auto)

之前，它是工作文件

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

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

知道要有边框并保持父级可滚动吗？谢谢。

Answer 1

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

或者，使用 border，以便将样式绘制为 height/width 计算的一部分。虽然 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;
}

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

border left and right dissapear when using scrollable div (overflow: auto)

html

css

angular-material

angular