PrimeNG table 未采用 Angular 中的固定宽度

Question

我正在尝试修复 primeNG table 中第一列的宽度，但它以某种方式覆盖了我的 CSS，即使它在检查元素时显示。

基本上，我正在寻找 CSS，其中通过更改选项卡，table 的第一列将具有固定宽度，无论所有列的大小如何。

我已经尝试通过为第一个 child 定义固定宽度来采用以下方法，但它采用的是基于 width:100%.

在上图中，您可以看到尺寸为 368，即使它被定义为 100px。

同样，当我更改标签时，宽度为 920，甚至 100px 是固定的。

有什么方法可以定义 fixed-width 100px 并具有 table width:100%，因为我不想破坏响应能力？

以下是可重现的示例以供参考：

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

Answer 1

我认为问题在于 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 2

这应该可以解决。删除所有元素的 fixed with 。将此添加到您的 style.css

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

Answer 3

我有一个项目需要的解决方案。

您应该执行以下步骤：

设置所需列的宽度
按照 primeng documentation 设置水平滚动，在水平滚动部分：

Horizontal Scroll: In horizontal scrolling, it is required to give fixed widths to columns. In general when customizing the column widths of scrollable tables, use colgroup as below to avoid misalignment issues as it will apply both the header, body and footer sections which are different separate elements internally.

这是一个实时 example，包括仅第一列的固定大小和响应式 table。

这是唯一的解决方案（为您的 table 设置固定大小），因为如果您在移动设备中将宽度设置为 100%，可能不会显示所有列或将重叠，破坏响应能力。

Answer 4

在 primeng 12 中，他们删除了 colgroup 模板，因此如果您在应用程序上使用 colgroup，则需要删除，因为如果您使用可滚动检查迁移指南，自定义宽度不适用于列。

link:https://github.com/primefaces/primeng/wiki/Migration-Guide

解决方法：您需要为和这两个标签添加相同的宽度如果您使用的是动态列，则再添加一个属性宽度，如下所示

[{ 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]="'width':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]="'width':col.width">
                       {{data[col.field]}}
                    </td>
                </tr>
</ng-template>
</p-table>

试试这个你肯定会得到 table 的响应宽度，你也会得到自定义列和 header 宽度

PrimeNG table 未采用 Angular 中的固定宽度

PrimeNG table is not taking the fixed width in Angular

html

css

primeng

angular