title: Angular Material Table -Border Inside the Table
body: <p>I am using Angular material table and I want to set border inside  the table, Using CSS I was able to set border: <strong>Normal case</strong>
  [<img src="https://i.stack.imgur.com/JX1BV.png" alt="enter image description here">
   <br>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 <strong>extra content</strong> <a href="https://i.stack.imgur.com/6WJgK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6WJgK.png" alt="enter image description here"></a><br>
  here is the CSS:</p>
  
  <pre><code>`.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;
  }`
  </code></pre>
  
  <p>HTML`
    </p>
  
  <pre><code>&lt;!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" --&gt;
  
  &lt;!-- Position Column --&gt;
  &lt;ng-container matColumnDef="position"&gt;
    &lt;mat-header-cell *matHeaderCellDef&gt; No. &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let element"&gt; {{element.position}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;!-- Name Column --&gt;
  &lt;ng-container matColumnDef="name"&gt;
    &lt;mat-header-cell *matHeaderCellDef&gt; Name &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let element"&gt; {{element.name}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;!-- Weight Column --&gt;
  &lt;ng-container matColumnDef="weight"&gt;
    &lt;mat-header-cell *matHeaderCellDef&gt; Weight &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let element"&gt; {{element.weight}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;!-- Symbol Column --&gt;
  &lt;ng-container matColumnDef="symbol"&gt;
    &lt;mat-header-cell *matHeaderCellDef&gt; Symbol &lt;/mat-header-cell&gt;
    &lt;mat-cell *matCellDef="let element"&gt; {{element.symbol}} &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
  &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
  </code></pre>
  
  <p>
  `</p>