Я использую Ng Prime Tables, и когда у меня есть столбцы> 3, все работает нормально , но когда у меня есть столбцы <= 3, остается пустое рядом с правой стороной </strong> с некоторымивыделенная ширина и даже в Inspect я не могу найти никакой опции для изменения ширины столбцов.
Решение 1: Я пытался
::ng-deep .ui-table table {
table-layout: auto !important;
}
Вывод неудовлетворительный, и он оставляет некоторый пробел справа.Кроме того, значения столбцов не занимают одинаковое пространство, нужна помощь, ребята
Решение 2: Я попытался
<p-table [autoLayout]="true">
Тот же вывод, что и в решении 1
Мой HTML-код:
<div class="primetable" style="box-shadow: 0 1px 20px 0 rgba(69,90,100,.08);">
<p-table [value]="student"
[columns]="cols"
#dt
class="primetable"
[paginator]="true"
[rows]="10" [style]="{width:'100%'}"
[autoLayout]="true"
[rowsPerPageOptions]="[10,15,20,25]">
<ng-template pTemplate="caption">
<div>
<input type="text"
class="form-control"
pInputText
size="50"
placeholder="Search Data Here"
(input)="dt.filterGlobal($event.target.value, 'contains')"
style="width:auto">
</div>
</ng-template>
<ng-template pTemplate="header"
let-columns>
<tr>
<th style="padding: 15px 15px;color: #1e6bb8;background: white"
*ngFor="let col of columns">{{col.header}}</th>
</tr>
</ng-template>
<ng-template pTemplate="body"
let-student
let-i="rowIndex"
>
<tr [pSelectableRow]="student">
<td >{{i+1}}</td>
<td>{{student.regnum}}</td>
<td>
<input type="checkbox">
</td>
<td>
</td>
</tr>
</ng-template>
</p-table>
Код TS:
this.cols = [
{ field: 'S.No', header: 'S.No' },
{ field: 'regnum', header: 'Regnum' },
{ field: 'attendance', header: 'Attendance' }
];
Заранее спасибо, Happy Coding