md-table - So aktualisieren Sie die Spaltenbreite

Antworten:

135

Wenn Material die Tabelle erstellt, werden automatisch zwei Klassennamen für Sie angewendet, mit denen Sie jede Spalte formatieren können. Im folgenden Beispiel heißen die Stile mat-column-userIdund cdk-column-userId.

<ng-container cdkColumnDef="userId">
  <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
  <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
</ng-container>

Jetzt können Sie diese Namen in CSS verwenden:

.mat-column-userId {
  flex: 0 0 100px;
}

Ähnlich wie bei Rahul Patils Antwort , aber Sie müssen Ihren Spaltendefinitionen keine weitere Klasse hinzufügen.

— Jymdman
quelle
In meinem Fall brauchte ich! Wichtig für Stile, die so angewendet wurden, da sonst der Stil für .mat-header-cellVorrang haben würde. Alternativ können Sie auch eine andere Stilregel für die Kopfzelle hinzufügen.
— Adrian Smith
Ist die Dokumentation dazu irgendwo verfügbar (ich wollte verstehen, was jeder der 3 Werte nach "flex" bedeutet und wie .mat-column- <colName> auf die entsprechende Spalte verweist)? Vielen Dank!
— Rahs
@RahulSaha flex ist jetzt eine Standard-CSS-Eigenschaft: "Dies ist eine Kurzform-Eigenschaft, mit der Flex-Grow, Flex-Shrink und Flex-Basis festgelegt werden." Quelle: developer.mozilla.org/en-US/docs/Web/CSS/flex
— Erik I
1
Dies ist die Lösung, die ich letztendlich verwendet habe, aber anstatt die Flex-Basis festzulegen, habe ich Flex Grow so eingestellt, dass die Zelle 3x größer ist als andere Zellen (Flex: 3 0 0)
— Emulcahy
3
Das Einstellen der Breite mit Flex hat in meinem Fall nicht funktioniert. Breite auch nicht. min-width tat (aus irgendeinem Grund).
— Paul Evans
53

Derzeit wurde es noch nicht auf API-Ebene verfügbar gemacht. Sie können dies jedoch mit etwas Ähnlichem erreichen

<ng-container cdkColumnDef="userId" >
  <md-header-cell *cdkHeaderCellDef [ngClass]="'customWidthClass'"> ID </md-header-cell>
  <md-cell *cdkCellDef="let row" [ngClass]="'customWidthClass'"> {{row.id}} </md-cell>
</ng-container>

In CSS müssen Sie diese benutzerdefinierte Klasse hinzufügen - 

.customWidthClass{
   flex: 0 0 75px;
}

Geben Sie hier die Logik zum Anhängen der Klasse oder der benutzerdefinierten Breite ein. Es wird eine benutzerdefinierte Breite für die Spalte angewendet.

Da md-table verwendet flex, müssen wir eine feste Breite in flexibler Weise angeben. Das erklärt einfach -

0 = nicht wachsen (Abkürzung für Flex-Grow)

0 = nicht schrumpfen (Abkürzung für Flex-Shrink)

75px = Start bei 75px (Abkürzung für Flex-Basis)

Plunkr hier - https://plnkr.co/edit/v7ww6DhJ6zCaPyQhPRE8?p=preview

— Rahul Patil
quelle
1
Nice.Both funktioniert. Danke dir. Aber wenn Daten mehr sind, gehen sie auch über die Tabelle hinaus. Und
— Zeilenumbruch
2
Warum verwenden Sie [ngClass] anstelle der normalen Klasse?
— Andre Elrico
36

Wenn Sie in Ihrem Projekt das Winkel- / Flex-Layout verwenden , können Sie die Spalte mit festlegen, indem Sie der mat-header-cell und der mat-cell die Anweisung fxFlex hinzufügen :

 <ng-container matColumnDef="name" >
      <mat-header-cell fxFlex="100px" *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
      <mat-cell  fxFlex="100px" *matCellDef="let row;" (click)="rowClick(row)">{{row.Name}}</mat-cell>
 </ng-container>

Andernfalls können Sie benutzerdefiniertes CSS hinzufügen, um dasselbe Ergebnis zu erzielen:

.mat-column-name{
    flex: 0 0 100px;
}
— Uliana Pavelko
quelle
15

Ich fand, dass eine Kombination der Antworten von Jymdman und Rahul Patil am besten für mich funktioniert:

.mat-column-userId {
  flex: 0 0 75px;
}

Wenn Sie eine "führende" Spalte haben, die immer einen bestimmten Speicherplatz auf verschiedenen Geräten einnehmen soll, fand ich Folgendes sehr praktisch, um die verfügbare Containerbreite reaktionsschneller zu gestalten (dies zwingt die verbleibenden Spalten dazu Verwenden Sie den verbleibenden Platz gleichmäßig):

.mat-column-userName {
  flex: 0 0 60%;
}
— Hans
quelle
Dies ist die beste Antwort.
— PedroPovedaQ
9

Ich verwende FlexLayout, um die Spaltenbreite entsprechend den von FlexLayout bereitgestellten Abfragemedien zu aktualisieren.

fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25"

bedeutet, dass diese Spalte standardmäßig 30% der Zeilenbreite verwendet. Wenn gt-xs @mediaQuery erfüllt ist, beträgt die neue Breite 15% und ein ähnliches Verhalten für andere Bedingungen 

<!-- CURRENTBALANCE COLUMN-->
  <ng-container cdkColumnDef="balance_2">
    <mat-header-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20"
       fxFlex.gt-md="25" fxLayout="row" fxLayoutAlign="center center"
       *cdkHeaderCellDef>{{ balanceTable.datesHeaders[2] }}</mat-header-cell>
    <mat-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25" 
      *cdkCellDef="let eventTop">
      <div fxLayout="column" fxLayoutAlign="center center">
        <!-- CELL_CONTENT-->
      </div>
    </mat-cell>
  </ng-container>
<!-- CURRENTBALANCE COLUMN-->

Weitere Informationen zu FlexLayout und @MediaQueries finden Sie unter https://github.com/angular/flex-layout/wiki/Responsive-API

— Felipe Santa
quelle
Das Hinzufügen der fxFlex-Direktive zu einer Spalte scheint sie alle zu beeinflussen. Gibt es eine Möglichkeit, nur eine Spalte anzuvisieren?
— Zakdances
6

Ich habe gerade verwendet:

th:nth-child(4) {
    width: 10%;
}

Ersetzen Sie 4 durch die Position des Headers, für den Sie die Breite anpassen müssen. Die Beispiele in der verwendeten Dokumentation :

td, th {
  width: 25%;
}

Also habe ich es einfach modifiziert, um das zu bekommen, was ich wollte.

— daniekpo
quelle
4

Sie können die .mat-cell-Klasse auf flex setzen: 0 0 200px; statt flex: 1 zusammen mit dem n-ten Kind.

.mat-cell:nth-child(2), .mat-header-cell:nth-child(2) {
    flex: 0 0 200px;
}
— Mark Cutajar
quelle
3

Sie können fxFlexvon "@ angle / flex-layout" in thund tdwie folgt verwenden:

<ng-container matColumnDef="value">
      <th mat-header-cell fxFlex="15%" *matHeaderCellDef>Value</th>
            <td mat-cell *matCellDef="let element" fxFlex="15%" fxLayoutAlign="start center">
                           {{'value'}}
            </td>
       </th>
</ng-container>
— amir110
quelle
2 
.mat-column-skills {
    max-width: 40px;
}
— Pragati Dugar
quelle
Sind Sie sicher, dass dies von der am besten bewerteten Antwort abweicht? Wahrscheinlich ist Ihr cdkColumnDef einfach anders?
— user1781290
nein das ist so ziemlich das gleiche, wollte nur hervorheben, dass nur das für mich funktioniert hat.
— Pragati Dugar
1

Sie können auch die Elementauswahl verwenden:

mat-header-cell:nth-child(1), mat-cell:nth-child(1) {
    flex: 0 0 64px;
}

Aber Jymdmans Antwort ist in den meisten Fällen der am meisten empfohlene Weg.

— Martin Schneider
quelle
1

Beispiel-Mat-Table-Spalte und entsprechendes CSS:

HTML / Vorlage

<ng-container matColumnDef="">
  <mat-header-cell *matHeaderCellDef>
     Wider Column Header
  </mat-header-cell>
  <mat-cell *matCellDef="let displayData">
    {{ displayData.value}}
  </mat-cell>`enter code here`
</ng-container>

CSS

.mat-column-courtFolderId {
    flex: 0 0 35%;
}
— Meol
quelle
0

Ich habe die sehr einfache Lösung dafür gefunden: Festlegen einer unterschiedlichen Breite für die Spalte im Stylesheet durch Überschreiben der Zelle und der Kopfzelle:

Example: setting custom width for 1st and 5th column:-
.mat-cell:nth-child(1),
.mat-header-cell:nth-child(1),
{
flex: 0 0 5%;
}
.mat-cell:nth-child(5),
.mat-header-cell:nth-child(5),
{
flex: 0 0 10%;
}

Github

— reza.cse08
quelle
0

Sie können das Styling auch direkt im Markup hinzufügen, wenn Sie dies wünschen:

<ng-container matColumnDef="Edit">
     <th mat-header-cell *matHeaderCellDef > Edit </th>
     <td mat-cell *matCellDef="let element" (click)="openModal()" style="width: 50px;"> <i class="fa fa-pencil" aria-hidden="true"></i> </td>
</ng-container>
— Sen Alexandru
quelle
0

Wenn Sie zu viele Tabellenspalten haben und diese nicht in der Winkeltabelle mit angepasst werden md-table, fügen Sie den folgenden Stil in die component.cssDatei ein. Es funktioniert wie ein Zauber mit horizontaler Bildlaufansicht. 

.mat-table__wrapper .mat-table {
    min-width: auto !important;
    width: 100% !important; }

.mat-header-row {
    width: 100%; }

.mat-row {
    width: 100%;
}

Fügen Sie diesen Stil hinzu, um Ihre Spalte separat zu ändern. 

.mat-column-{colum-name} {
    flex: 0 0 25% !important;
    min-width: 104px !important;
}

Alternativ überprüfen Sie diesen Link , (wo der Code oben kam) , für weitere Einzelheiten.

— kontashi35
quelle
0

Nehmen wir ein Beispiel. Wenn Ihre Tabelle folgende Spalten enthält:

<!-- ID Column -->
  <ng-container matColumnDef="id" >
    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
    <td mat-cell *matCellDef="let row"> {{row.sid}} </td>
  </ng-container>

 <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let row"> {{row.name}} </td>
  </ng-container>

Da diese zwei Spalten enthalten. dann können wir die Breite der Spalten mit einstellen

.mat-column-<matColumnDef-value>{
    width: <witdh-size>% !important;
}

Für dieses Beispiel nehmen wir 

  .mat-column-id{
    width: 20% !important;      
  }
  .mat-column-name{
    width: 80% !important;
  }
— am2505
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.