ng-table固定標頭和滾動條

我使用這個NG-TABLE並且很難嘗試修改CSS。我想要數據的固定標題和滾動條。我正在使用CSS in this link。ng-table固定標頭和滾動條

我的html看起來像這樣。

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

我打開開發人員工具，並觀察到表滾動CSS無法正常工作。

我發現了這個問題。用戶代理css覆蓋我的css。在ng表中，還有另一個表和clss。我如何覆蓋它？

來源

2017-07-06 Chatra

當您使用標準class屬性的值可以通過角元素被忽略。

好多去與ngClass代替，因爲它將其值附加到由該元素添加任何類：

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

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

第二個選擇是改變選擇從.table-scroll thead ...到通用表格選擇器table thead ... etc，如果頁面上沒有其他表格會受到影響。

來源

2017-07-09 03:52:10

@scandrett。我嘗試了你給我的兩個選項。它不起作用 – Chatra

@Chatra當我嘗試時使用'[ngClass]' - https://plnkr.co/edit/d4uFrAsnRJqYMqiyLuTG?p=preview –

@scandrett。我再次嘗試。你的調度員看起來不錯，但正如我在我的問題表中所說的風格被ng-table類所覆蓋。您可以看到，在我的Chrome開發人員工具中，屏幕截圖爲 – Chatra

由於結構是有點不同，你可以調整你的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 
}

最終，你可以添加!important到無法被重寫規則...

來源

2017-07-10 04:18:40

會嘗試讓你知道。謝謝！ – Chatra

不，它不工作。樣式被在chrome開發工具屏幕截圖中顯示的ng-table覆蓋 – Chatra

ng-table固定標頭和滾動條

回答

相關問題