具有自定义宽度的 PrimeNG TurboTable 无法正常工作

Question

我正在尝试使用自定义大小 (500px) 的 PrimeNG turbotable，我希望自动设置列宽，但它不起作用。我得到一个水平滚动条，总宽度似乎固定在 767 像素。如果我尝试手动设置列宽，它会被忽略。如果我不设置 table 宽度并尝试将其放在 500px 宽的 DIV 中，我仍然会得到相同的结果（水平滚动条）。

下面是（非常简单的）代码：

        <p-table #dt [value]="statusChangesData" [paginator]="true" [alwaysShowPaginator]="false" [rows]="2" [style]="{'width':'500px'}">
            <ng-template pTemplate="caption" >
                <div class="tableCaption">
                    <span translate>Status changes</span>
                </div>
            </ng-template>
            <ng-template pTemplate="emptymessage">
                <tr>
                    <td [attr.colspan]="3">
                        <span translate>There are no data into the table</span>
                    </td>
                </tr>
            </ng-template>
            <ng-template pTemplate="header">
                <tr>
                    <th style="width:200px" [pSortableColumn]="'date'"><span translate>Date</span><p-sortIcon [field]="'date'"></p-sortIcon></th>
                    <th style="width:200px" [pSortableColumn]="'status'"><span translate>Status</span><p-sortIcon [field]="'status'"></p-sortIcon></th>
                    <th style="width:100px" [pSortableColumn]="'userId'"><span translate>User ID</span><p-sortIcon [field]="'userId'"></p-sortIcon></th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-col>
                <tr>
                    <td>{{col.date}}</td>
                    <td>{{col.status}}</td>
                    <td>{{col.userId}}</td>
                </tr>
            </ng-template>
        </p-table>

这是它的样子：

Turbo Table

如您所见，页眉和分页器都遵循我设置的宽度 (500px)，但 table 的主体不。

我已经尝试了所有我能在堆栈溢出中找到的建议，包括设置像这样的样式： [style]="{'width':'200px'} 或使用 [autoLayout]="true" 但似乎没有任何效果。我正在使用 primeNG 7.0.0.

PS。我真的不在乎手动设置每个列宽。我只是不想要水平滚动条。

Answer 1

我从上面复制了您的代码并将其粘贴到新的 Stackblitz 项目中以进行测试。我什至专门指定了 PrimeNG 的 7.0.0 版本，以确保不同版本没有任何问题。（我在使用 PrimeNG 时发现是这种情况。）我还编了一些数据来展示。

我没有看到你说的问题。这是我生成的网格的样子（忽略 Stackblitz 没有找到 primeicons 的事实）

它完全保持 500 像素宽，所有列都符合您在 header 行（<th> 标签）中指定的固定宽度。当我删除您在 [=] 中提供的固定宽度时11=] 标签，所有列都是 auto-adjusting 并且适合 500px table.

我在自己的组件中有这个 table，它没有包含在 <div> 或任何其他标签中。您可以在我上面提供的 Stackblitz link 上查看。

我想知道这个页面的其余部分是否有问题导致了这个问题？

Answer 2

如果有人遇到类似问题，请尝试将 table 的最小宽度设置为 0：

::ng-deep .ui-table .ui-table-wrapper table {
    min-width: 0px;
}

具有自定义宽度的 PrimeNG TurboTable 无法正常工作

PrimeNG TurboTable with custom width does not work properly

html

css

primeng

angular

primeng-turbotable