Hey David, let's work through that sticky header issue you're facing with Bootstrap-Vue's b-table — I've dealt with similar layout quirks before, so here's what you need to know:

First, Let's Break Down the Problem #

When you set sticky-header="320px", that value tells the header to stay 320px below the top of the viewport when fixed. But since your table is nested inside a card with a title, this offset doesn't align with your layout, so the header doesn't stick as expected. Removing the pixel value makes the header stick to the viewport top immediately, which causes it to overlap with the card above because there's no space accounted for the card's height.

Also, your table is wrapped in a <div class="col-12" style="height: 350px;"> — if this container doesn't have proper overflow settings, the table content might spill out, and the sticky behavior won't work as intended.

Solution 1: Page-Level Sticky Header (Avoid Card Overlap) #

If you want the header to stay fixed as you scroll the entire page, follow these steps:

1. Set sticky-header="true" (remove the 320px value entirely)
2. Add custom CSS to adjust the header's top offset to match the total height of your card (including the title). Let's say your card is roughly 120px tall — adjust this number to match your actual layout:

   /* Add this to your component's <style> section */
   .b-table-sticky-header {
     top: 120px !important;
   }
   

   This will make the header stick just below your card, eliminating the overlap.

Solution 2: Container-Level Sticky Header (Table Scrolls Inside Its Box) #

If you want the table to scroll within its 350px tall container with the header fixed at the top of that container:

1. Update your container div to include overflow: auto so the table content scrolls inside it:

   <div class="col-12" style="height: 350px; overflow: auto;">
   

2. Set sticky-header="true" (no pixel value needed here — it will stick to the top of the scrollable container)

Quick Check: Bootstrap-Vue Version #

Make sure you're using a recent, stable version of Bootstrap-Vue. Older versions had bugs with the sticky-header property, so updating might resolve the issue if the above fixes don't work.

Here's how your adjusted code could look for Solution 1:

<div class="card">
  <div class="card-body">
    <h2 class="card-title text-center">PRODUCTS</h2>
    <div class="row">
      <div class="col-12">
        <b-table 
          sticky-header="true" 
          :items="products" 
          :fields="table.fields" 
          :per-page="table.perPage" 
          :current-page="table.currentPage" 
          :busy="table.isBusy" 
          head-variant="light" 
          responsive
        >
          <template #cell(actions)="row">
            <b-button size="sm" @click="addToOrder(row.item, row.index, $event.target)" class="mr-1">
              Add
            </b-button>
          </template>
        </b-table>
      </div>
    </div>
  </div>
</div>

<style scoped>
.b-table-sticky-header {
  top: 120px !important;
}
</style>

Just tweak the 120px value to match how tall your card actually is, and you should be good to go!

内容的提问来源于stack exchange，提问作者David Uy