title: Scrollable PrimeNG table breaks body width when all expandable rows are collapsed
body: <p>:-)</p>
  
  <p>I use 2 features of the PrimeNG table (<code>&lt;p-table&gt;</code>, Version 8) in combination:</p>
  
  <ul>
  <li><a href="https://www.primefaces.org/primeng/#/table/scroll" rel="nofollow noreferrer">Scroll</a></li>
  <li><a href="https://www.primefaces.org/primeng/#/table/rowexpansion" rel="nofollow noreferrer">Row expansion</a></li>
  </ul>
  
  <p>This works quite well as long as the table is indeed scrollable:
  <a href="https://i.stack.imgur.com/MNrkF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MNrkF.png" alt="enter image description here"></a></p>
  
  <p>But when to many rows are collapsed the table is smaller than the threashold <code>scrollHeight</code> I configured at the <code>p-table</code>. That makes the scrollbar go away so that the table body fills up that space - without the header getting wider too:
  <a href="https://i.stack.imgur.com/mlaoG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mlaoG.png" alt="enter image description here"></a></p>
  
  <h3>What I tried so far</h3>
  
  <ul>
  <li>Force the scrollbar: According to <a href="https://css-tricks.com/snippets/css/force-vertical-scrollbar/" rel="nofollow noreferrer">this article</a> giving an html element the css style <code>overflow-y: scroll</code> enforces the scrollbar to allways be visible. However the scrollable element I deal with here is generated by PrimeNG and so far I couldn't overwrite it's style</li>
  <li>Use <code>position: sticky</code> to make the header follow: I already blowed hours in applying that attribute to the header. It never took effect. Thats why I tried this with the <code>scrollable</code> function of <code>p-table</code>in the first place.</li>
  </ul>
  
  <p>May the force be with you!</p>