【问题标题】: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;
    }
    

    【讨论】:

    • 感谢您的解释。现在你提到它,它似乎很明显。我认为可以通过添加另一个具有负边距的包装器来从源头解决问题。但与此同时,您的解决方案会做得很好。我什至不知道你可以对轮廓应用偏移,我总是使用阴影来制作内部边框。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-04-24
    • 1970-01-01
    • 2021-12-15
    • 1970-01-01
    • 2012-07-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多