title: How to get a Vue b-table to scroll the body with a fixed header
body: <p>I've got a <code>b-table</code> element on a page that currently displays a bunch of data from a database. At the moment it is paginated, but feedback has indicated that they would rather have all the information displayed in a single scrolling view. I can do this, but the problem is that if I set a containing <code>div</code> to scroll the whole table, it also scrolls the column headers away. I need to find a way to be able to scroll just the table body while leaving the column headers in place, and I'd prefer to be able to do it within the bounds of the element itself instead of rigging up something with completely separate header and body with a bunch of Javascript rigging in the background.</p>
  
  <p>Under the component reference of the <a href="https://bootstrap-vue.js.org/docs/components/table#component-reference" rel="noreferrer">bootstrap-vue table component</a>, it says that there is a property called <code>tbody-class</code> which looks like it's a way to specify a custom class for the tbody (crazily enough). The page doesn't give any indication of how to use it, though, and my experimentation hasn't produced any results:</p>
  
  <pre><code>&lt;b-table 
      tbody-class="my-class"   &lt;- Applies prop to table but not to tbody
      :tbody-class="my-class"  &lt;- Seemingly ignored entirely
  &gt;
  </code></pre>
  
  <p>It sounds like this sort of issue was solved on <a href="https://github.com/bootstrap-vue/bootstrap-vue/issues/1405" rel="noreferrer">this issue thread</a>, but it doesn't really detail <em>how</em> it was solved. It mentions that the functionality was added to "the next update", but neither the patch notes of the version released following that comment nor the documentation mentions that addition at all (unless it means the properties I mentioned in the previous paragraph). It does talk about using CSS selectors to apply the style in a roundabout fashion, but I wasn't able to get that to work either. (In the following example, the <code>tbody</code> in the Chrome inspector did not have the applied style.)</p>
  
  <pre><code>.table.my-table &gt; tbody {
      height: 100px;
  }
  </code></pre>
  
  <p>The version of Vue I'm using is 2.2.6.</p>