Блог

Я пытаюсь использовать PrimeNG turbotable с пользовательским размером (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>
  

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

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

Как вы можете видеть, и заголовок, и разбиение на страницы соответствуют заданной мной ширине (500 пикселей), а тело таблицы — нет.

Я перепробовал все предложения, которые смог найти в stack overflow, включая настройку стиля следующим образом: [style]="{'width':'200px'} или использование [autoLayout]="true" , но, похоже, ничего не работает. Я использую PrimeNG 7.0.0.

PS. На самом деле мне не нужно устанавливать ширину каждого столбца вручную. Мне просто не нужна горизонтальная полоса прокрутки.

Если у кого-то возникла подобная проблема, попробуйте установить минимальную ширину таблицы равной 0:

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

Я скопировал ваш код сверху и вставил его в новый проект Stackblitz, чтобы протестировать его. Я даже специально указал версию PrimeNG 7.0.0, чтобы убедиться, что с разными версиями нет никаких проблем. (Я обнаружил, что это имеет место, когда я использовал PrimeNG.) Я также создал некоторые данные для отображения.

Я не вижу проблем, о которых вы говорите. Вот как выглядит моя результирующая сетка (игнорируйте тот факт, что Stackblitz не находит primeicons .)

Его ширина составляет 500 пикселей, а все столбцы соответствуют фиксированной ширине, указанной вами в строке заголовка ( <th> теги.) Когда я удалил фиксированную ширину, указанную вами в <th> тегах, все столбцы автоматически настраиваются и помещаются в таблицу размером 500 пикселей.

У меня есть эта таблица в отдельном компоненте, и она не заключена в <div> или какие-либо другие теги. Вы можете проверить это по ссылке Stackblitz, которую я предоставил выше.

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