PrimeNG 表未采用 Angular 中的固定寬度

Question

我正在嘗試修復 primeNG 表中第一列的寬度，但它以某種方式覆蓋了我的 CSS，即使它在檢查元素時顯示。

基本上，我正在尋找 CSS ，其中通過更改選項卡，表格的第一列將具有固定的寬度，無論所有列的大小是多少。

我已經嘗試通過為第一個孩子定義固定寬度來嘗試以下方式，但它采用基於寬度：100%。

在上圖中，即使定義為 100 像素，您也可以看到尺寸為 368。

同樣，當我更改選項卡時，寬度將變為 920，即使 100px 也是固定的。

有什么方法可以定義固定寬度 100px 的表格寬度：100%，因為我不想破壞響應能力？

以下是可重復的示例供參考：

https://stackblitz.com/edit/primeng-tablescroll-demo-wtpbny

Answer 1

我有我的一個項目所需的解決方案。

您應該執行以下步驟：

1. 為所需的列設置寬度
2. 根據primeng文檔設置水平滾動，在水平滾動部分：

水平滾動：在水平滾動中，需要給列固定寬度。 通常，在自定義可滾動表的列寬時，請使用 colgroup 如下以避免未對齊問題，因為它將同時應用 header、正文和頁腳部分，它們是內部不同的獨立元素。

這是一個實時示例，包括僅用於第一列的固定大小和響應表。

這是唯一的解決方案（為表格設置固定大小），因為如果您在移動設備中將寬度設置為 100%，可能不會顯示所有列或將重疊，從而破壞響應能力。

Answer 2

我認為問題只是您的th元素的選擇器稍微不正確。 你有：

::ng-deep .p-datatable .p-datatable-tbody > tr > th:nth-child(1) {

但您只需要使用.p-datatable-thead而不是.p-datatable-tbody ：

::ng-deep .p-datatable .p-datatable-thead > tr > th:nth-child(1) {

Answer 3

這應該修復。 刪除所有元素的固定。 將此添加到您的樣式中。css

.p-datatable .p-datatable-thead > tr > th {
    width: inherit !important;
}

Answer 4

在primeng 12中，他們刪除了colgroup模板，因此如果您在應用程序上使用colgroup，則需要刪除，因為如果您使用可滾動檢查遷移指南，自定義寬度不適用於列。

鏈接： https://github.com/primefaces/primeng/wiki/Migration-Guide

解決方案：如果您使用動態列，則需要為 <th [style]="'100px'"> 和 <td [style]="'100px'"> 標簽添加相同的寬度，然后再添加一個屬性寬度，如下所示

[{ header: "Name", field: "name", width: '100px' }] // 列 object 數組 object

<p-table [value]="data" [columns]="ColumnObjectArray">   
<ng-template pTemplate="header" let-columns>
                <tr>
                    <th *ngFor="let col of columns; let idx=index;" class="" 
                           [style]="col.width">{{col.header}}</th>
               </tr>
</ng-template>
<ng-template pTemplate="body" let-data let-columns="columns">
                <tr>
                    <td *ngFor="let col of columns" [style]="col.width">
                       {{data[col.field]}}
                    </td>
                </tr>
</ng-template>
</p-table>

試試這個，你肯定會得到表格的響應寬度，你也會得到自定義列和 header 寬度