css selector for table with scroll-CodePudding

I have a table in html page, it can contain some or many records, I want to apply specific css to the table, only when there is a scroll on the table, when there are some records and there is no scroll I don't want this css definition to affect the table. How can I do it?

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

CodePudding user response：

use ViewChild ref to the table and check if scroll is visible in ngClass if scroll is exist then the class will be added to the table :

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

then add your class in css style sheet:

.visibleScroll{
//your style css
}