Ng Prime Tabelle Thead Spalten Einstellung Breite nicht automatisch

stimmen
0

Ich bin mit Ng Prime Tabellen und wenn ich Spalten> 3 alles funktioniert gut , aber wenn ich Spalten <= 3 sein ein leere neben nach rechts verlassen mit einiger Breite zugewiesen und sogar in Inspect ich kann jede Option finden , um Breite zu ändern Säulen.

Geben

Lösung 1: Ich habe versucht ,

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

Geben

Der Ausgang ist nicht zufriedenstellend, und seine etwas Platz auf der rechten Seite zu verlassen. Auch die Spaltenwerte werden nicht gleich viel Raum einnimmt, müssen einige Hilfe Jungs

Lösung 2: Ich habe versucht,

<p-table [autoLayout]=true>

Gleiche Leistung wie Lösung 1

Mein HTML-Code:

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

this.cols = [
      { field: 'S.No', header: 'S.No' },
      { field: 'regnum', header: 'Regnum' },
      { field: 'attendance', header: 'Attendance' }
  ];

Vielen Dank im Voraus, Glücklich Coding

Veröffentlicht am 20/10/2018 um 12:25
quelle vom benutzer
In anderen Sprachen...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more