Angular Material Table -Border Inside the Table

Question

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 [

Answer 1

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