title: Angular Material table has no design
body: <p>Why is my Angular material table has no design? It is not the same as the tables I've seen on the documentation. Here is the code:</p>
  <pre><code>&lt;mat-table&gt;
    &lt;ng-container matColumnDef=&quot;userId&quot;&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;User ID&lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef=&quot;let row&quot;&gt;{{row.userId}}&lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef=&quot;id&quot;&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;ID&lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef=&quot;let row&quot;&gt;{{row.id}}&lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef=&quot;title&quot;&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Title&lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef=&quot;let row&quot;&gt;{{row.title}}&lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef=&quot;completed&quot;&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Completed&lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef=&quot;let row&quot;&gt;{{row.completed}}&lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/mat-header-row&gt;
    &lt;mat-row *matRowDef=&quot;let row; columns: displayedColumns&quot;&gt;&lt;/mat-row&gt;
  &lt;/mat-table&gt;
  &lt;mat-paginator [pageSizeOptions]=&quot;[5, 10, 25, 100]&quot;&gt;&lt;/mat-paginator&gt;
  </code></pre>
  <p>Here is the output table<br />
  <a href="https://i.stack.imgur.com/Y5Shc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y5Shc.png" alt="Here is the output table" /></a></p>