Ng Главные столбцы таблицы не настраивают ширину автоматически - PullRequest
0 голосов
/ 20 октября 2018

Я использую Ng Prime Tables, и когда у меня есть столбцы> 3, все работает нормально , но когда у меня есть столбцы <= 3, остается пустое рядом с правой стороной </strong> с некоторымивыделенная ширина и даже в Inspect я не могу найти никакой опции для изменения ширины столбцов.

enter image description here

Решение 1: Я пытался

::ng-deep .ui-table table {
    table-layout: auto !important;
}

enter image description here

Вывод неудовлетворительный, и он оставляет некоторый пробел справа.Кроме того, значения столбцов не занимают одинаковое пространство, нужна помощь, ребята

Решение 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...