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

Question

我正在尝试使用 PrimeNG turbotable使用自定义大小 (500px)，我希望列宽可以自动设置，但它不起作用。我得到一个水平滚动条，总宽度似乎固定在 767 像素。如果我尝试手动设置列宽，它会被忽略。如果我不设置表格宽度并尝试将其放在 500 像素宽的 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)，但表格的正文不这样做。

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

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

Answer 1

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

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