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 ![enter image description here](https://i.stack.imgur.com/6WJgK.png)
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:最终,我找到了解决方案,因为材质使用弹性布局,我们可以使用
CSSalign-self: stretch; /* Stretch 'auto'-sized items to fit the container */
使用align-self的结果:拉伸 https://i.stack.imgur.com/7T6gz.png
这是更新后的 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;
} `
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)