css table 选择器带滚动条

Question

我在 html 页面中有一个 table，它可以包含一些或许多记录，我想将特定的 css 应用到 table，只有当 table 上有滚动条时，当有一些记录并且没有滚动条时我不希望这个 css 定义影响 table。我该怎么做？

table **here I need the selector** thead {
     width: calc( 100% - .5em )/* scrollbar is average 1em/16px width, 
      remove it from thead width */
}

Answer 1

使用 ViewChild 引用 table 并检查滚动是否在 ngClass 中可见如果存在滚动则 class 将被添加到 table：

<table #table [ngClass]="{'visibleScroll': table.scrollHeight > table.clientHeight }"></table>

然后在 css 样式中添加您的 class sheet:

.visibleScroll{
//your style css
}

css table 选择器带滚动条

css selector for table with scroll

css

scroll

sass

angular