PrimeNG TurboTable с пользовательской шириной не работает должным образом

Question

Я пытаюсь использовать турборежим PrimeNG с нестандартным размером (500 пикселей), и я ожидал, что ширина столбцов будет установлена ​​автоматически, однако она не работает.Я получаю горизонтальную полосу прокрутки, и общая ширина кажется фиксированной в 767 пикселей.Если я пытаюсь установить ширину столбца вручную, он игнорируется.Если я не устанавливаю ширину таблицы и пытаюсь поместить ее в DIV шириной 500 пикселей, я все равно получаю тот же результат (горизонтальная полоса прокрутки).

Ниже приведен (очень простой) код:

        <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>

и вот как это выглядит:

Турбо-таблица

Как видно, заголовок и paginator соответствуют ширине, которую я установил(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, которую я предоставил выше.

Интересно, есть ли что-то в остальной части страницы, в которой это содержится, что вызывает проблему?