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

Answer 2

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