title: Horizontal ScrollBar not displaying when mouse is hover
body: <p>I have a table that is relatively large.
  I want a horizontal scroll bar to be displayed when I move the mouse over it.
  The current problem is that this scrollbar appears when the page loads, but disappears a second later.</p>
  <p>I really want this scrollbar to appear when I move the mouse over it.
  <a href="https://i.stack.imgur.com/UHAKM.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UHAKM.gif" alt="enter image description here" /></a></p>
  <p>This is the actual code, the table is scrollable but the scrollbar is displaying when mouse is hover.</p>
  <pre><code>.mat-table {
   position: relative;
   overflow: auto;
   width: 100%;
   height: 100%;
  }
  
  .mat-row, .mat-header-row {
   min-width: 1800px;
   width: 100%;
  }
  </code></pre>