Currently, I have implemented a b-table element on a webpage to display data from a database. The table is paginated, but feedback suggests that users prefer all information displayed in a single scrolling view. However, the issue arises when I attempt to scroll the entire table within a containing div, as it also moves the column headers out of view. My goal is to find a solution where only the table body scrolls while keeping the column headers stationary, all without resorting to complex Javascript manipulation.
In the component reference for the bootstrap-vue table component, there is mention of a property called tbody-class, which appears to offer a way to define a custom class for the tbody element. Unfortunately, the page does not provide clear instructions on how to utilize this feature, and my attempts at using it have yielded no success:
<b-table
tbody-class="my-class" <- Adds prop to table but not tbody
:tbody-class="my-class" <- Seems to be completely ignored
>
An apparent solution to a similar problem was mentioned in this issue thread, though details on the actual resolution are lacking. It references an upcoming update that should address the issue, yet neither the subsequent version's patch notes nor documentation acknowledge this addition (unless referring to the previous properties). Additionally, suggestions about applying styles through CSS selectors indirectly were ineffective in my case, as evidenced by inspecting the tbody element in Chrome.
.table.my-table > tbody {
height: 100px;
}
The Vue version being used is 2.2.6.