title: How to display the table headers in a row, in angular material table?
body: <p><em>My Material table displays the value in below manner:</em></p>
  
  <p><strong>Name |quatity</strong></p>
  
  <p>Mango|10</p>
  
  <pre><code>    &lt;div class="table-cover center-table"&gt;
        &lt;div class="mat-elevation-z8 elevation-scroll-control"&gt;
          &lt;table mat-table class="full-width-table left-margin" [dataSource]="dataSource" matSort aria-label="Elements"&gt;
  
            &lt;!-- Name Column --&gt;
            &lt;ng-container matColumnDef="name"&gt;
              &lt;td mat-header-cell *matHeaderCellDef &gt;Name&lt;/td&gt;
              &lt;td mat-cell *matCellDef="let row" class=""&gt;
                &lt;div class="cell-style padding-left"&gt;{{row.Name}}&lt;/div&gt;
              &lt;/td&gt;
            &lt;/ng-container&gt;
  
            &lt;!-- quantity Column --&gt;
            &lt;ng-container matColumnDef="quantity"&gt;
              &lt;td mat-header-cell *matHeaderCellDef&gt;quantity&lt;/td&gt;
              &lt;td mat-cell *matCellDef="let row"&gt;
                &lt;div class="cell-style"&gt;{{row.quantity}}&lt;/div&gt;
              &lt;/td&gt;
            &lt;/ng-container&gt;
  
            &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt; &lt;/tr&gt;
            &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt; &lt;/tr&gt;
          &lt;/table&gt;
  
        &lt;/div&gt;      
      &lt;/div&gt;
  </code></pre>
  
  <p><em>But I want to display the value like below:</em></p>
  
  <p><strong>Name</strong> | Mango</p>
  
  <p><strong>quatity</strong> | 10</p>
  
  <p><em>How can I achieve this? any help is much appreciated</em></p>