AngularJS ng-table fixed headers

angularjs, ngtable

Solution

this CSS-only solution worked for me. Just add the class `table-scroll` to the table element and the following CSS:

.table-scroll thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.table-scroll tbody {
    max-height: 150px;
    overflow-y: auto;
    display: block;
    width: 100%;
    table-layout: fixed;
}

.table-scroll tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.table-scroll td {
    height: 47px; // needed in order to keep rows from collapsing
}

Problem

I'm using ng-table to display some information. I would like to make the header and footer of the ng-table fixed and force the ng-table to draw scroll bars within the rows. The ng-table documentation site has no documentation on how to make that happen. Any ideas?

Original source