0

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

K Scandrett
  • 16,390
  • 4
  • 40
  • 65
Chatra
  • 2,989
  • 7
  • 40
  • 73

2 Answers2

1

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.

K Scandrett
  • 16,390
  • 4
  • 40
  • 65
  • @scandrett. I tried both options you gave me. It is not working – Chatra Jul 09 '17 at 13:35
  • @Chatra Works with `[ngClass]` when I tried it - https://plnkr.co/edit/d4uFrAsnRJqYMqiyLuTG?p=preview – K Scandrett Jul 10 '17 at 00:26
  • @scandrett. I tried again. Your plunker looking good but as I said in my question table style is overwritten by ng-table class. You can see that in my chrome developer tools screenshot – Chatra Jul 10 '17 at 15:34
  • The `` is what is generated by the `` element, not the 'user agent'. It is never going to include `table-scroll` class in there because that isn't specified in the Ng2Table component's code, but nor does it need to. If you use `ngClass` instead of `class` it adds the class to `` tag that encloses `
    `. The CSS selector ".table-scroll thead" says apply to any `` at any depth within a parent element with the `table-scroll` class. So the class doesn't need to be applied to the `
    ` directly to work (as shown in the fiddle)
     – K Scandrett Jul 11 '17 at 00:43
  • Updated plunker with more of NgTable's styling https://plnkr.co/edit/gj5Y0UP3KQDdYsXspwYZ?p=preview. The scrolling still works correctly. If you look in Dev Tools, you'll see `table-scroll` class applied to ``. If you want to override the CSS used by Ng2Table just include your css after their stylesheets, copy and use their selectors with your custom values. – K Scandrett Jul 11 '17 at 00:45
0

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...

Daniel Kucal
  • 8,684
  • 6
  • 39
  • 64