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

Question

我正在尝试使用具有自定义大小（500px）的PrimeNG turbotable，并且我希望自动设置列宽，但是它不起作用。我得到一个水平滚动条，总宽度似乎固定为767像素。如果我尝试手动设置列宽，它将被忽略。如果我没有设置表格宽度，而是尝试将其放在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），但表的主体却不这样做。

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

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

Answer 1

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

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

Answer 2

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

我没有看到您正在谈论的问题。这就是我生成的网格的样子（忽略Stackblitz找不到primeicons的事实。）

它完美地保持了500px的宽度，并且所有列都遵循标题行中指定的固定宽度（<th>标签。）当我删除了<th>标签中提供的固定宽度时，所有的列是自动调整并适合500px表的。

我将此表放在其自己的组件中，并且没有包装在<div>或任何其他标签中。您可以在我上面提供的Stackblitz链接中进行检查。

我想知道页面其余部分是否存在某些问题？