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>
`
MatTableDataSource. Data source that accepts a client-side data array and includes native support of filtering, sorting (using MatSort), and pagination (using MatPaginator). Allows for sort customization by overriding sortingDataAccessor, which defines how data properties are accessed.
What is Angular DataTables? Angular DataTables is a library for building complex HTML tables that uses jQuery's DataTables plugin. It is configured to support TypeScript and optimized for Angular 2+. Angular DataTables will come in handy when: You have a very large dataset coming in from one or more API endpoints.
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
Here is the updated 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;
} `
Approach:1
You need to stretch your table cell content whenever parent row height grows.
To do that you can make your table cell a flex box, add an additional class to mat-cell <mat-cell class="flex-stretch">
and add these to your css:
.mat-cell .flex-stretch {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
/* align-items center so that cell content is vertically centered */
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With