Fix header for table without a fixed height

[mathiasconradt]

Hi, you showed in your documentation a way to achieve a fix header: original Plunkr.

This works only with tables that have a fixed height, such as in your example: height:500px;

How to make this work with CSS with a dynamic table height, i.e. no explicit height set or height:100%?

(I tried to use your lrStickyHeader library and used the sample directive in my Angular app, but the header just would not stick, even though the directive gets called as I can see from logging I added. Therefore I try to go the CSS way. But my tables all don't have a fixed height.)

The way I came up with is to set the table height in px dynamically by getting the visible area/height of the div container that is surrounding my table via javascript. But this is an ugly hack. https://plnkr.co/edit/3oyuGZgPmLlaFSly41au?p=preview

Thanks.

---

By the way (not directly related to my original problem): I just noted that the header column in your original example do not have the correct width, which you see when you add the table-bordered class to the table, see Plunkr.

This can be fixed by changing

tbody {
    overflow-y: scroll;
    display: inline-block;
}

to

tbody, thead {
    overflow-y: scroll;
    display: inline-block;
}

[mathiasconradt]

I found out why the Angular directive does not work in my app. It's because in general it does not work if the table is inside a container with a fixed height overflow:auto; where the table fills the entire height of the container height (dynamically).

Example: https://jsfiddle.net/361vw6c3/

Opened a separate ticket for that: https://github.com/lorenzofox3/lrStickyHeader/issues/13

I would expect it to work in the same way as the CSS approach, where you can have something fix above the table. https://plnkr.co/edit/3oyuGZgPmLlaFSly41au?p=preview