Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I'm stuck on a problem involving a fixed header table. I'm using AngularJS & Bootstrap to build a web application. I can't use ng-grid as it doesn't support IE7. So, I'm populating the table rows by ng-repeat. The application is responsive. So, I can't give fixed width to the cells/headers. Is there any simple way to have the table headers fixed?

I've put up a Plunker at Fixed header table with AngularJS

Thanks in advance.

share|improve this question
    
I don't understand, you want table headers fixed but also responsive. How is that possible? –  Stewie Jun 28 '13 at 10:03
    
@Stewie please see this: fixedheadertable.com –  Arnab Das Jun 28 '13 at 10:06
    
@Stewie you can also take the example of ng-grid. If you set the header fixed, it remains responsive. –  Arnab Das Jun 28 '13 at 10:09
    
A-ha, you want it's position fixed. I thought you want to have fixed column widths. –  Stewie Jun 28 '13 at 10:11
2  
Keep in mind that IE7 isn't supported for AngularJS. –  matsko Sep 14 '13 at 14:26
show 1 more comment

3 Answers 3

I created a directive for this recently, you can install it using bower:

bower install angu-fixed-header-table

For more details and a working example you can see my blog post at http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive

share|improve this answer
add comment

A co-worker and I have just released a new GitHub project that supplies an Angular directive that you can use to decorate your table with fixed headers: https://github.com/objectcomputing/FixedHeader

This implementation isn't as fully-featured as some other implementations, but if your need is simply to add fixed tables, we think this might be a good option.

share|improve this answer
add comment

You better to keep the header part outside the table. Take two tables:

  • one for header and
  • another one for table data. (put the scroller in table data part only.)

Good luck!

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.