Scrolling table with fixed headers

[esheffield-ivantage]

Something like this: http://www.imaputz.com/cssStuff/bigFourVersion.html

I've looked at a lot of different discussions about how to accomplish this, either through plug-ins or using CSS, but so far nothing I've found has worked quite how I would like it. My primary problem with the CSS approach is that having to apply the display: block; property breaks the formatting of the table, making it look ugly and unable to resize with the window. Is this a feature you've ever considered adding to ng-table? If not, do you know of the best way I can achieve this?

[esvit]

No, i don't know how do this and i haven't plan do this feature. It is not easy functionality

[rconrad]

+1, this functionality would make ngTables so incredible compared to ng-grid or others that try to do the same.

[jack-kerouac]

I am specifically looking for this feature. I found an (ugly) way to make it work with ng-grid. Angular-table supports it out of the box.
This would be a great feature, though I acknowledge that it is not easy.

[Diego81]

+1

[benn0r]

+1

[pursual]

+1

[lyon-liao]

+1

[jvanderbiest]

I've implemented this using a jquery plugin (https://github.com/jmosbech/StickyTableHeaders).

There is a plunkr here: http://plnkr.co/edit/KyilXo?p=preview

[wherpoelaert]

+1

[divramod]

+1

[terencevs]

+1

[gitnik]

+1

[lee-40square]

+1

[brunoosilva]

+1

[ghost]

+1

[andrewboni]

Definitely +1 on this

[arthur-kv]

+1

[anthony-o]

+1

[lindelleric]

+1

[dmoskovtsov]

+1

[schmidtl]

+1

[incadoi]

+1

[sagarbhosale91]

I'm using angular js ng-table to display some information. I would like to make the header of the ng-table fixed with scroll bar.Moreover I need to place one accordion just before the ng-table.

When I collapse the accordion my ng-table fixed header does not work properly. Please refer plunker I have created : http://plnkr.co/edit/FGjU46cCMuhIdyacffHl?p=preview

[RomainGx]

+1

[sagarbhosale91]

Resolved with accordain ... Demo 👍 http://plnkr.co/edit/D5XxfgH79bR2wVDhPlku?p=preview

[corbinolds]

The plugin works fine for keeping the header in place, but when resizing the page, the header retains the same width until the page is refreshed or the table is scrolled back to the top.

When looking at the accordion plunker, when i scroll down in the table and resize the page width, the header keeps the same size it had as when the page wasn't resized. http://plnkr.co/edit/FGjU46cCMuhIdyacffHl?p=preview

[devLaaziz]

+1

[lessu]

+1

[SmallDev]

+1

[theaspect]

Whoever find this, use https://github.com/jmosbech/StickyTableHeaders works out of the box with this directive:

.directive "stickyHeader", ["$timeout", ($timeout)->
  restrict: 'A'
  link: (scope, element, attrs) ->
    $timeout(() -> $(element).stickyTableHeaders())
]

[chrispyliang]

here is an approach with pure css

tbody {
    max-height: 200px; 
    overflow-y: scroll;
    display: block;
}

thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}