Fixed columns and header using CSS / Angular JS

Question

I am having trouble doing the following:

• Correct table title
• Correct the first 4/5 columns to freeze, and the rest - horizontally.
• The table should be inside a div that has a fixed height and width

I can fix the title, I can’t achieve # 2. The table is inside the panel on the page. Therefore, I cannot use position:absolute to correct the columns to reach # 2.

I tried several examples on the Internet to achieve this, but I need to create an angular JS directive for this. I am new to AngularJS, however I tried to fine tune the example below, but no luck.

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

Any help on the CSS way of doing this will also help.

I also added a plunker for what I'm trying to do. So I want to freeze the first two columns in this example.

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

Answer 1

If you just add more lines to thead , they will automatically fix them for you, as directives do.

See here: http://embed.plnkr.co/CmJBfd/preview

Thus, all you have to do is put in your ranks a custom class that you don't need to look like a heading and style, like strings.