Я начал использовать md-table для своего проекта, и мне нужна фиксированная ширина столбца. На данный момент все столбцы по ширине разделены на одинаковые размеры.
Где я могу получить документацию по размерам таблицы данных?
Я начал использовать md-table для своего проекта, и мне нужна фиксированная ширина столбца. На данный момент все столбцы по ширине разделены на одинаковые размеры.
Где я могу получить документацию по размерам таблицы данных?
Ответы:
Когда Material создает таблицу, он автоматически применяет два имени класса, которые вы можете использовать для стилизации каждого столбца. В приведенном ниже примере стили названы mat-column-userIdи 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>
Теперь вы можете использовать эти имена в css:
.mat-column-userId {
flex: 0 0 100px;
}
Подобно ответу Рахула Патила , но вам не нужно добавлять еще один класс в определения столбцов.
На данный момент он еще не был представлен на уровне API. Однако вы можете добиться этого, используя что-то вроде этого
<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>
В css вам нужно добавить этот собственный класс -
.customWidthClass{
flex: 0 0 75px;
}
Не стесняйтесь вводить логику добавления сюда класса или произвольной ширины. Он применит нестандартную ширину для столбца.
Поскольку используется md-table flex, нам нужно гибко указать фиксированную ширину. Это просто объясняет -
0 = не расти (сокращение от flex-grow)
0 = не сжиматься (сокращение от flex-shrink)
75px = начало с 75px (сокращение от flex-base)
Plunkr здесь - https://plnkr.co/edit/v7ww6DhJ6zCaPyQhPRE8?p=preview
Если вы используете в своем проекте angular / flex-layout , вы можете установить столбец с, добавив директиву fxFlex в mat-header-cell и 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>
В противном случае вы можете добавить собственный CSS для достижения того же результата:
.mat-column-name{
flex: 0 0 100px;
}
Проверьте это: https://github.com/angular/material2/issues/5808
Поскольку material2 использует гибкий макет, вы можете просто установить fxFlex="40"(или желаемое значение для fxFlex) на md-cellи md-header-cell.
fxFlex="40px"это тоже возможно,
Я обнаружил, что комбинация ответов Джимдмана и Рахула Патила лучше всего работает для меня:
.mat-column-userId {
flex: 0 0 75px;
}
Кроме того, если у вас есть один «ведущий» столбец, который вы хотите всегда занимать определенное количество места на разных устройствах, я обнаружил, что следующее очень удобно для адаптации к доступной ширине контейнера в более гибком виде (это заставляет остальные столбцы равномерно используйте оставшееся пространство):
.mat-column-userName {
flex: 0 0 60%;
}
В документации по материалам Angular используются
.mat-column-userId {
max-width: 40px;
}
для его табличного компонента, чтобы изменить ширину столбца. Опять же, userId будет именем ячейки.
Я использую FlexLayout для обновления ширины столбца в соответствии с носителем запроса, который предоставляет нам FlexLayout.
fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25"
означает, что этот столбец будет использовать 30% ширины строки по умолчанию, при выполнении gt-xs @mediaQuery новая ширина будет 15% и аналогичное поведение для других условий
<!-- 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-->
Узнайте больше о FlexLayout и @MediaQueries на https://github.com/angular/flex-layout/wiki/Responsive-API
Я просто использовал:
th:nth-child(4) {
width: 10%;
}
Замените 4 положением заголовка, ширину которого вам необходимо настроить. Примеры из документации :
td, th {
width: 25%;
}
Поэтому я просто изменил его, чтобы получить то, что хотел.
Вы можете установить для класса .mat-cell значение flex: 0 0 200px; вместо flex: 1 вместе с nth-child.
.mat-cell:nth-child(2), .mat-header-cell:nth-child(2) {
flex: 0 0 200px;
}
Теперь вы можете сделать это так
<cdk-cell [style.flex]="'0 0 75px'">
вы можете использовать fxFlex"@ angular / flex-layout" thи tdвот так:
<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>
.mat-column-skills {
max-width: 40px;
}
Вы также можете использовать селекторы элементов:
mat-header-cell:nth-child(1), mat-cell:nth-child(1) {
flex: 0 0 64px;
}
Но ответ jymdman - это наиболее рекомендуемый способ в большинстве случаев.
Образец столбца Mat-table и соответствующий CSS:
HTML / шаблон
<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%;
}
Вы также можете добавить стиль прямо в разметку, если хотите:
<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>
Если у вас слишком много столбцов таблицы и они не настраиваются в угловой таблице с помощью md-table, вставьте следующий стиль в component.cssфайл. Он будет работать как шарм с горизонтальной прокруткой.
.mat-table__wrapper .mat-table {
min-width: auto !important;
width: 100% !important; }
.mat-header-row {
width: 100%; }
.mat-row {
width: 100%;
}
Добавьте этот стиль, чтобы изменить столбец отдельно.
.mat-column-{colum-name} {
flex: 0 0 25% !important;
min-width: 104px !important;
}
Кроме того, проверьте эту ссылку , (где код выше пришел от) , более подробно.
Возьмем пример. Если в вашей таблице есть следующие столбцы:
<!-- 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>
Поскольку это содержит два столбца. тогда мы можем установить ширину столбцов, используя
.mat-column-<matColumnDef-value>{
width: <witdh-size>% !important;
}
для этого примера мы берем
.mat-column-id{
width: 20% !important;
}
.mat-column-name{
width: 80% !important;
}
У меня есть очень простое решение - установить разную ширину столбца в таблице стилей, переопределив как ячейку, так и ячейку заголовка:
Пример - установка произвольной ширины для 1-го и 5-го столбца:
.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%;
}
.mat-header-cellприоритет будет иметь стиль для . В качестве альтернативы вы можете просто добавить другое правило стиля для ячейки заголовка.