AngularJS ng-table fixed headers

angularjs ngtable
alessandro ferrucci picture alessandro ferrucci · May 17, 2014 · Viewed 47.6k times · Source

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?

Answer

Yaron picture Yaron · May 25, 2016

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
}

Related questions

Trying to center align button in td

I'm having trouble centering a button in a td. This is probably a simple CSS issue, but the app is using bootstrap, AngularJS, AngularJS-ui-bootstrap, and ngTable. I've included all of these components in my plunkr. I'm trying to set "horizontal-align: …

Read More
How to reload angularJs ng-table

I have an ng-table. I have multiple ng-tables inside one controller. I am giving dynamic attributes i.e. ng-table="tableParams2" or ng-table="tableParams3" etc. to them. I am making an ajax request on button click function to update the data. …

Read More
Angular ng-table dynamic headers doesn't work inside

I am using ng-table with dynamic columns, using the creator's example found at http://bazalt-cms.com/ng-table/example/20 It worked just fine, until i tried to wrap on a directive with transclude, witch caused the headers to disappear as seen …

Read More