How to make table headers non scrollable bootstrap vue

0
votes

I am new to bootstrap vue .I have used bootstrap-vue 1.4 for my whole application used b-table for my table but the table headers also move when scrolled i want to make them sticky or non scrollable i found that with the new bootstrap-vue 2.0 there is an option sticky-header but i cannot use that because i might break my application is there any way to make the headers sticky using bootstrap-vue 1.4

4
cssvue.jsbootstrap-vue

4 Answers

2
votes
 .table.b-table>thead>tr>th {
  background-color: white;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 2;
}

This thing worked for me use it in the app.vue it should fix all the b-tables

0
votes

Sticky headers are a "sticky" situation. Only <td> and <th> elements can be made "sticky" (via css position: sticky). The table itself needs to be wrapped in a fixed height vertically scrollable <div>.

Note that Bootstrap V4.x CSS does not have table cells inherit their parent's background color (See this issue at Bootstrap's repo). So you will find that the background colors (including default of solid white) and borders will scroll with the body (the header cells will remain transparent), making the result not overly great. You would need to make sure each header cell (<th>) has a solid background color.

BootstrapVue 2.0.0.rc-28 had to add in quite a bit of SCSS/CSS and conditional JavaScript behaviour to handle this issue.

0
votes

Did you try css sticky?

Add class to your b-table component and use this class to add:

.myclass {
    position: sticky;
}

Or to select table header, here is complete example:

.myclass > thead {
    position: sticky;
    top: 0px; // try more if you have page header/navbar
    display: inherit; // try this and width below to be sure thead response to sticky behavior.
    width: 100%;
}