AngularJS ng-table fixed headers

Question

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.

Answer 1

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
}