title: Floating horizontal scrollbar with mat-table in Angular
body: <p>Is it possible to add a floating horizontal scrollbar to a <code>mat-table</code> in Angular 7 without JQuery or any other additional plugins?</p>
  
  <p>I have a <code>mat-table</code> that shows 6 columns but also can dynamically add 100+ columns with the push of a button. <br>But then the layout breaks.</p>
  
  <p><strong>HTML-Part:</strong></p>
  
  <pre><code>&lt;button (click)="showLess()" mat-stroked-button class="show-button"&gt;Show Less&lt;/button&gt;
  &lt;button (click)="showMore()" mat-stroked-button class="show-button"&gt;Show More&lt;/button&gt;
  
  &lt;div class="component data component-card"&gt;
  &lt;mat-card *ngIf="dataSource?.filteredData" class="mat-card"&gt;
      &lt;mat-paginator [length]="length" [pageSize]="100" [pageSizeOptions]="[100, 250, 500, 1000, 2000]" showFirstLastButtons&gt; &lt;/mat-paginator&gt;
      &lt;mat-table [dataSource]="dataSource" matSort class="table"&gt;
          &lt;ng-container class="container" *ngFor="let displayedColumn of displayedColumns" matColumnDef="{{ displayedColumn }}"&gt;
              &lt;mat-header-cell class="header-cell" *matHeaderCellDef &gt;
                  &lt;span mat-sort-header class="sort-header"&gt;{{ displayedColumn | uppercase }}&lt;/span&gt;
                  &lt;input class="table-input" matInput (keyup)="applyFilter($event.target.value)" (focus)="setupFilter(displayedColumn)" placeholder="Filter"/&gt;
              &lt;/mat-header-cell&gt;
              &lt;mat-cell class="cell" *matCellDef="let item"&gt;{{ item[displayedColumn] }}&lt;/mat-cell&gt;
          &lt;/ng-container&gt;
          &lt;mat-header-row class="header-row" *matHeaderRowDef="displayedColumns; sticky: true"&gt;&lt;/mat-header-row&gt;
          &lt;mat-row class="row" *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
      &lt;/mat-table&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS-Part:</strong></p>
  
  <pre><code>.data {
      display: block;
      width: 95vw;
      overflow: auto;
  
      .table {
          width: 100vw;
          max-width: 100%;
          overflow: auto;
          margin-bottom: 10px;
          display: table;
          border-collapse: collapse;
          margin: 0px;
          background-color: rgb(238, 238, 238);
  }
      .row,
      .header-row {
          display: table-row;
          min-height: 36px !important;
  }
      .cell,
      .header-cell {
          word-wrap: initial;
          display: table-cell;
          padding: 0px 5px;
          line-break: unset;
          width: fit-content;
          white-space: nowrap;
          overflow: hidden;
          vertical-align: middle;
          text-align: center;
  }
      .header-row,
      .header-cell {
          margin: 0 auto;
          min-height: 100px !important;
          text-align: center;
          vertical-align: middle;
          align-self: center;
  }
      .sort-header {
          display: flex;
          align-content: center;
          text-align: center;
          justify-content: center;
          font-size: 12pt;
  }
      .header-cell {
          font-weight: bold;
      }
  }
  
  .mat-card {
      min-width: max-content;
      max-width: max-content;
  }
  </code></pre>
  
  <p>If the overflows are both active then I have to scroll down to be able to scroll horizontally but the layout stays as it should. Only the mat-table and the div around it it will be scrolled and the elements above the mat-table (search fields etc.) are staying where they should. Everything stays in the middle of the screen.</p>
  
  <p>If I deactivate the overflow from the div in the ".data" then the normal browser scrollbar appears and I don't have to scroll down anymore. But the mat-table expands the screen to the right on scrolling and the search fields above will stay on the left when scrolling horizontally which for me breaks the layout.</p>
  
  <p>What I need would be a combination of both scrollbars which would be a floating scrollbar in my eyes. I would only scroll the mat-table but the rest stays in place.</p>
  
  <p>Is there a way to accomplish that natively with CSS or Angular?</p>
  
  <p><strong>Demo:</strong>
  <a href="https://stackblitz.com/edit/angular-elm867?file=src%2Fapp%2Fapp.component.scss" rel="noreferrer">https://stackblitz.com/edit/angular-elm867?file=src%2Fapp%2Fapp.component.scss</a></p>
  
  <p>If you click on Show More just see how the buttons behave when scroll after commentating "overflow: auto" in and out in the ".data".</p>
  
  <p>Here's an image on how the table scrollbar should replace the normal scrollbar: <a href="https://i.stack.imgur.com/LIm4R.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LIm4R.png" alt="enter image description here"></a></p>