角材料表-表内边界 [英] Angular Material Table -Border Inside the Table
问题描述
我正在使用Angular材质表,并且想在表内设置边框,使用CSS可以设置边框:普通情况
[
但是当特定单元格的内容增加时,相邻单元格的边界不会增加,并且该表看起来很糟糕,具有额外的内容
这是CSS:
I am using Angular material table and I want to set border inside the table, Using CSS I was able to set border: Normal case
[
but when the content of a particular cell increases border of the neighbor cells don't grow and the table looks pretty bad cell with extra content
here is the CSS:
`.example-container {
display: flex;
flex-direction: column;
max-height: 500px;
min-width: 300px;
}
.mat-table {
overflow: auto;
max-height: 500px;
}
.mat-column-name{
border-left: 1px solid grey;
min-height: 48px;
}
.mat-column-weight{
border-left: 1px solid grey;
min-height: 48px;
.mat-column-symbol{
border-left: 1px solid grey;
min-height: 48px;
}`
HTML`
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
`
推荐答案
方法2:
最终,我想出了解决方案,因为材料使用了柔版布局,我们可以使用
的CSS
align-self: stretch; /* Stretch 'auto'-sized items to fit the container */
带有align-self的结果:拉伸
Approach-2:
Eventually, I figured out the solution, since material uses flex-layout we can use
CSS
align-self: stretch; /* Stretch 'auto'-sized items to fit the container */
Result with align-self: stretch
这是更新的CSS
`.example-container {
display: flex;
flex-direction: column;
flex-basis: 300px;
}
.mat-table {
overflow: auto;
max-height: 500px;
}
.mat-column-name{
border-right: 1px solid grey;
align-self: stretch;
text-align: center
}
.mat-column-position{
border-right: 1px solid grey;
align-self: stretch;
text-align: center;
}
.mat-column-weight{
border-right: 1px solid grey;
align-self: stretch;
text-align: center;
}
.mat-column-symbol{
text-align: center;
align-self: stretch;
}
.mat-column-weight{
align-self: stretch;
} `
这篇关于角材料表-表内边界的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!