CODEWITHSUNDEEP
cssangularngtable
Chatra
Chatra

Reputation: 3129

ng-table fixed header and scroll bar

I am using this NG-TABLE and having a hard time trying to modify CSS. I want fixed header and scroll bar for the data. I am using CSS in this link.

My html looks like this.

<ng-table class="table-scroll" [config]="config"
          [rows]="rows" [columns]="columns">
</ng-table>

I opened developer tools and observed that table scroll css is not working.

I found the issue. User agent css is overwriting my css. Inside ng-table, there is another table and clss. How can I override that ?

enter image description here

Upvotes: 0

Views: 3826

Answers (2)

Daniel Kucal
Daniel Kucal

Reputation: 9232

As the structure is bit different, you can adjust your CSS:

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

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

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

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

Eventually you can add !important to the rules that can't be overwritten...

Upvotes: 0

K Scandrett
K Scandrett

Reputation: 16540

When you use the standard class attribute its value can be ignored by the Angular element.

Much better to go with ngClass instead, as it will append its values to any classes added by the element:

<ng-table [ngClass]="'table-scroll'" [config]="config" [rows]="rows" [columns]="columns">
</ng-table>

Example plunker: https://plnkr.co/edit/d4uFrAsnRJqYMqiyLuTG?p=preview

A second option would be to change the selector from .table-scroll thead ... to the generic table selector table thead ... etc, if you don't have other tables on the page that would be affected.

Upvotes: 1

Related Questions