html - Fixed columns and header with CSS/Angular JS -

html - Fixed columns and header with CSS/Angular JS -

i having problem implementing following:

fix header of table fix first 4/5 columns freeze , rest scroll horizontally the table should within div of fixed height , width

i able prepare header, not able accomplish #2. table within pane on page. can't utilize position:absolute prepare columns accomplish #2.

i tried out few examples online accomplish this, need create angular js directive this. new angularjs, however, tried tweak below illustration no luck.

https://www.pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive

any help on css way help.

i added plunker trying do. want freeze first 2 columns in example.

http://plnkr.co/edit/ikwnrqt1gy1odvyk6ffn?p=preview

if add together more rows thead automatically prepare them directive calls do.

see here: http://embed.plnkr.co/cmjbfd/preview

thus, have set custom class on rows not want header , style them rows.

html css angularjs angularjs-directive