title: Sticky table header doesnt work in angular materials mat-sidenav-container
body: <p>Heyho,</p>
  
  <p>I have some trouble with html/css tables and sticky headers when using angular material.</p>
  
  <p>In my project I use angular materials sidenav with <code>&lt;mat-sidenav-container&gt;</code>, <code>&lt;mat-sidenav&gt;</code> and <code>&lt;mat-sidenav-content&gt;</code>. Inside <code>&lt;mat-sidenav-container&gt;</code> the sticky header of tables doesn't work.</p>
  
  <p>I created a small project on github to easily reproduce the issue:<br>
  Repo: <a href="https://github.com/ManticSic/angular-material-sticky-table-issue" rel="nofollow noreferrer">https://github.com/ManticSic/angular-material-sticky-table-issue</a><br>
  GH Pages: <a href="https://manticsic.github.io/angular-material-sticky-table-issue/" rel="nofollow noreferrer">https://manticsic.github.io/angular-material-sticky-table-issue/</a></p>
  
  <p>The table header is moved 64px downwards, instead of being fixed at y=64px when scrolling.</p>
  
  <p>Do you have any idea how i can fix this?</p>
  
  <p>Cheers and thx</p>
  
  <hr>
  
  <p><strong>Notes</strong>  </p>
  
  <ul>
  <li>It would be okay, if the header is sticked/fixed to the top of the page, because only a table is displayed when I use this view where I need this. But I need proper columns with the correct width.</li>
  <li>I hope my problem can be fixed w/o JavaScript</li>
  <li>The solution has to work in the latest versions of firefox, chrome/chromium, safari and samsung mobile browser</li>
  </ul>
  
  <hr>
  
  <p><strong>Not Working Solutions</strong> </p>
  
  <ul>
  <li><code>position:fixed</code> on app-table-header and removing <code>position:sticky</code> from cells:
  Not working, because the colum-width is not correct</li>
  </ul>