md-table - Cách cập nhật chiều rộng cột

86

Tôi đã bắt đầu sử dụng bảng md cho dự án của mình và tôi muốn chiều rộng cột cố định. Hiện tại tất cả chiều rộng cột được chia thành kích thước bằng nhau.

Tôi có thể lấy tài liệu về kích thước bảng dữ liệu ở đâu?

https://material.angular.io/components/table/overview

angular 
— Vinutha Kumar
nguồn

Câu trả lời:

137

Khi Material tạo bảng, nó tự động áp dụng hai tên lớp cho bạn mà bạn có thể sử dụng để tạo kiểu cho mỗi cột. Trong ví dụ bên dưới, các kiểu được đặt tên mat-column-userIdvà 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>

Bây giờ bạn có thể sử dụng những tên đó trong css:

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

Tương tự như câu trả lời của Rahul Patil , nhưng bạn không cần thêm một lớp khác vào định nghĩa cột của mình.

— jymdman
nguồn
Trong trường hợp của tôi, tôi cần! Điều quan trọng đối với các kiểu được áp dụng như thế này vì nếu không thì kiểu cho .mat-header-cellsẽ được ưu tiên hơn. Ngoài ra, bạn có thể chỉ cần thêm một quy tắc kiểu khác cho ô tiêu đề.
— Adrian Smith
Tài liệu về điều này có sẵn ở bất cứ đâu không (tôi muốn hiểu từng giá trị trong 3 giá trị sau "flex" có nghĩa là gì và cách .mat-column- <colName> tham chiếu đến cột tương ứng)? Cảm ơn!
— rahs
@RahulSaha flex hiện là thuộc tính css tiêu chuẩn: "Đây là thuộc tính tốc ký đặt cơ sở flex-grow, flex-co và flex-grow." source: developer.mozilla.org/en-US/docs/Web/CSS/flex
— Erik Tôi
1
Đây là giải pháp tôi đã kết thúc sử dụng, nhưng thay vì đặt cơ sở flex tôi đặt nuôi flex nên tế bào là 3x lớn hơn tế bào khác (flex: 3 0 0)
— emulcahy
3
Đặt chiều rộng bằng flex không hoạt động trong trường hợp của tôi. Chiều rộng cũng vậy. min-width đã làm (vì một số lý do).
— Paul Evans
53

Hiện tại, nó vẫn chưa được hiển thị ở cấp API. Tuy nhiên, bạn có thể đạt được nó bằng cách sử dụng thứ gì đó tương tự như thế này

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

Trong css, bạn cần thêm lớp tùy chỉnh này - 

.customWidthClass{
   flex: 0 0 75px;
}

Vui lòng nhập logic để thêm lớp hoặc chiều rộng tùy chỉnh vào đây. Nó sẽ áp dụng chiều rộng tùy chỉnh cho cột.

Vì sử dụng md-table flex, chúng ta cần cung cấp chiều rộng cố định theo cách linh hoạt. Điều này giải thích một cách đơn giản -

0 = don't grow (viết tắt của flex-grow)

0 = không co lại (viết tắt của flex-co)

75px = bắt đầu ở 75px (viết tắt cho cơ sở linh hoạt)

Plunkr tại đây - https://plnkr.co/edit/v7ww6DhJ6zCaPyQhPRE8?p=preview

— Rahul Patil
nguồn
1
Tốt. Cả hai đều hoạt động. Cảm ơn bạn. Nhưng nếu dữ liệu nhiều hơn thì nó cũng vượt ra ngoài bảng. Và word-wrap cũng không làm việc
— Vinutha Kumar
2
tại sao bạn sử dụng [ngClass] thay vì lớp bình thường?
— Andre Elrico
37

Nếu bạn đang sử dụng bố cục góc / flex trong dự án của mình, bạn có thể đặt cột bằng cách thêm chỉ thị fxFlex vào mat-header-cell và mat-cell:

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

Nếu không, bạn có thể thêm CSS tùy chỉnh để đạt được kết quả tương tự:

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

Tôi nhận thấy sự kết hợp giữa câu trả lời của jymdman và Rahul Patil đang phù hợp nhất với tôi:

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

Ngoài ra, nếu bạn có một cột "hàng đầu" mà bạn muốn luôn chiếm một lượng không gian nhất định trên các thiết bị khác nhau, tôi thấy cách sau đây khá hữu ích để áp dụng chiều rộng vùng chứa có sẵn trong một loại đáp ứng tốt hơn (điều này buộc các cột còn lại sử dụng đồng đều không gian còn lại):

.mat-column-userName {
  flex: 0 0 60%;
}
— Hans
nguồn
Đây là câu trả lời tốt nhất.
— PedroPovedaQ
9

Tôi đang sử dụng FlexLayout để cập nhật chiều rộng cột theo phương tiện truy vấn mà FlexLayout cung cấp cho chúng tôi.

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

nghĩa là cột này sẽ sử dụng 30% chiều rộng hàng theo mặc định, khi gt-xs @mediaQuery được đáp ứng, chiều rộng mới sẽ là 15% và hành vi tương tự đối với các điều kiện khác 

<!-- 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-->

Đọc thêm về FlexLayout và @MediaQueries tại https://github.com/angular/flex-layout/wiki/Responsive-API

— Felipe Santa
nguồn
Thêm chỉ thị fxFlex vào một cột dường như có hiệu lực với tất cả chúng. Có cách nào để nhắm mục tiêu chỉ một cột không?
— zakdances
6

Tôi vừa mới sử dụng:

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

Thay thế 4 bằng vị trí của tiêu đề mà bạn cần điều chỉnh chiều rộng. Các ví dụ trong tài liệu được sử dụng:

td, th {
  width: 25%;
}

Vì vậy, tôi chỉ sửa đổi nó để có được những gì tôi muốn.

— daniekpo
nguồn
4

Bạn có thể đặt lớp .mat-cell thành flex: 0 0 200px; thay vì flex: 1 cùng với con thứ n.

.mat-cell:nth-child(2), .mat-header-cell:nth-child(2) {
    flex: 0 0 200px;
}
— Mark Cutajar
nguồn
4

Bây giờ bạn có thể làm điều đó như thế này

<cdk-cell [style.flex]="'0 0 75px'">
— Jason Politis
nguồn
4

bạn có thể sử dụng fxFlextừ "@ angle / flex-layout" trong thvà tdnhư thế này:

<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
nguồn
2 
.mat-column-skills {
    max-width: 40px;
}
— Pragati Dugar
nguồn
Bạn có chắc chắn rằng câu trả lời này khác với câu trả lời được bình chọn hàng đầu không? Có lẽ cdkColumnDef của bạn chỉ khác?
— user1781290
không điều đó khá giống nhau, chỉ muốn làm nổi bật, rằng chỉ điều này phù hợp với tôi.
— Pragati Dugar, 09/07/19
1

Bạn cũng có thể sử dụng các bộ chọn phần tử:

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

Nhưng câu trả lời của jymdman là cách được khuyến nghị nhất trong hầu hết các trường hợp.

— Martin Schneider
nguồn
1

Cột Mat-table mẫu và CSS tương ứng:

HTML / Mẫu

<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
nguồn
0

Bạn cũng có thể thêm kiểu trực tiếp trong phần đánh dấu nếu muốn:

<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
nguồn
0

Nếu bạn có quá nhiều cột trong bảng và nó không được điều chỉnh trong bảng góc bằng cách sử dụng md-table, hãy dán kiểu sau vào component.csstệp. Nó sẽ hoạt động giống như một chiếc bùa với chế độ xem cuộn theo chiều ngang. 

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

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

.mat-row {
    width: 100%;
}

Thêm kiểu này để thay đổi cột của bạn một cách riêng biệt. 

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

Ngoài ra, hãy kiểm tra liên kết này , (mã ở trên đến từ đâu) , để biết thêm chi tiết.

— kontashi35
nguồn
0

Hãy lấy một ví dụ. Nếu bảng của bạn có các cột như sau:

<!-- 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>

Vì điều này chứa hai cột. thì chúng ta có thể đặt chiều rộng của các cột bằng cách sử dụng

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

đối với ví dụ này, chúng tôi lấy 

  .mat-column-id{
    width: 20% !important;      
  }
  .mat-column-name{
    width: 80% !important;
  }
— am2505
nguồn
0

Tôi đã có giải pháp rất dễ dàng cho việc này - đặt chiều rộng khác nhau cho cột trong biểu định kiểu bằng cách ghi đè cả ô tiêu đề và ô tiêu đề:

Ví dụ - đặt chiều rộng tùy chỉnh cho cột thứ nhất và thứ năm:

.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
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.