Question

我正在使用Ng Prime表，当我有 columns> 3时，一切都很好，但是当我有<= 3列时，右侧旁边留空分配了一些宽度，甚至在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' }
  ];

感谢提前，祝您编码愉快

Ng Prime表thead列无法自动调整宽度

0 个答案: