css selector for table with scroll

user_17506369 0
Viewed 68

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 */
}
angular sass scroll css
1 Answers

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
}
user_91407400
Related