Dynamic Bootstrap Table with Fixed Header

Question

Dynamic Bootstrap Table with Fixed Header

I am customizing a Bootstrap table by adding CSS for a sticky header. My code snippet includes the following:

.table-sticky th {
  background: #fff;
  position: sticky;
  top: -1px;
  z-index: 990;
}

<div class="table-responsive p-0 mt-2">
  <table class="table table-sm table-striped table-hover table-sticky">
    <thead>
      <tr>
        <th>#</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1,001</td>
        <td>Lorem</td>
        <td>ipsum</td>
        <td>dolor</td>
        <td>sit</td>
      </tr>
      <tr>
        <td>1,002</td>
        <td>amet</td>
        <td>consectetur</td>
	<td>adipiscing</td>
        <td>elit</td>
      </tr>
    </tbody>
  </table>
</div>

The issue arises when I wrap the table in div.table-responsive. How can I make both the sticky header and responsive wrapper coexist?

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

It is impossible to have a position: sticky element within a .table-responsive without having to completely rewrite the latter.

To solve this issue, I opted for utilizing .table-responsive-sm to avoid compromising functionality when a responsive table is not required.

Answer 2

It is impossible to have a position: sticky element within a .table-responsive without having to completely rewrite the latter.

To solve this issue, I opted for utilizing .table-responsive-sm to avoid compromising functionality when a responsive table is not required.

Answer 3

Answer №2

If you find yourself in a situation where you need this functionality, the solution is to write the code yourself. The JavaScript snippet below will help achieve the desired effect:

var element = document.getElementById("fixed-thead");
var parentElement = element.parentElement;
window.addEventListener('scroll', () => {
    var coordinates = parentElement.getBoundingClientRect();
    if (coordinates.y < 0) {
        element.style.transform = 'translate3d(0, ' + (-coordinates.y) + 'px, 0)';
    } else {
        element.style.transform = 'translate3d(0,0,0)';
    }
});

To implement this code, make sure to mark the thead of your table with the ID "fixed-thead", like so:

<thead id="fixed-thead">

The use of translate3d aids in enabling hardware acceleration, resulting in smoother performance. If the scroll event triggers too frequently when using the scroll wheel, consider implementing debouncing for better user experience.

If your table contains columns with fixed widths, you can opt for using position: fixed and top: 0. However, for tables with varying lengths, it is recommended to stick with translate3d for optimal results.

In case you need to apply this code to multiple tables on a page, utilize the following script:

function applyFixedHeader(element) {
var parentElement = element.parentElement;
    window.addEventListener('scroll', () => {
        var coordinates = parentElement.getBoundingClientRect();
        if (coordinates.y < 0) {
            element.style.transform = 'translate3d(0, ' + (-coordinates.y) + 'px, 0)';
        } else {
            element.style.transform = 'translate3d(0,0,0)';
        }
    });
}

var elements = document.querySelectorAll("{yourSelector, e.g. `.table-fixed` for the tables containing class `table-fixed`}");
elements.forEach(element => applyFixedHeader(element));

Answer 4

If you find yourself in a situation where you need this functionality, the solution is to write the code yourself. The JavaScript snippet below will help achieve the desired effect:

var element = document.getElementById("fixed-thead");
var parentElement = element.parentElement;
window.addEventListener('scroll', () => {
    var coordinates = parentElement.getBoundingClientRect();
    if (coordinates.y < 0) {
        element.style.transform = 'translate3d(0, ' + (-coordinates.y) + 'px, 0)';
    } else {
        element.style.transform = 'translate3d(0,0,0)';
    }
});

To implement this code, make sure to mark the thead of your table with the ID "fixed-thead", like so:

<thead id="fixed-thead">

The use of translate3d aids in enabling hardware acceleration, resulting in smoother performance. If the scroll event triggers too frequently when using the scroll wheel, consider implementing debouncing for better user experience.

If your table contains columns with fixed widths, you can opt for using position: fixed and top: 0. However, for tables with varying lengths, it is recommended to stick with translate3d for optimal results.

In case you need to apply this code to multiple tables on a page, utilize the following script:

function applyFixedHeader(element) {
var parentElement = element.parentElement;
    window.addEventListener('scroll', () => {
        var coordinates = parentElement.getBoundingClientRect();
        if (coordinates.y < 0) {
            element.style.transform = 'translate3d(0, ' + (-coordinates.y) + 'px, 0)';
        } else {
            element.style.transform = 'translate3d(0,0,0)';
        }
    });
}

var elements = document.querySelectorAll("{yourSelector, e.g. `.table-fixed` for the tables containing class `table-fixed`}");
elements.forEach(element => applyFixedHeader(element));

Answer 5

Answer №3

To ensure the table head is fixed without any additional CSS, simply remove the table-responsive class from the div and add the class "bg-white sticky-top border-bottom" to the table tag. Here's an example:

<div class="table">
  <table class="table">
   <thead>
    <tr>
     <th class="bg-white sticky-top border-bottom">FirstName</th>
     <th class="bg-white sticky-top border-bottom">LastName</th>
     <th class="bg-white sticky-top border-bottom">Class</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>John</td>
       <td>Cooker</td>
       <td>A1</td>
     </tr>
     <tr>
       <td>David</td>
       <td>Jeferson</td>
       <td>A2</td>
     </tr>
     ...
  </table>
</div>

Answer 6

To ensure the table head is fixed without any additional CSS, simply remove the table-responsive class from the div and add the class "bg-white sticky-top border-bottom" to the table tag. Here's an example:

<div class="table">
  <table class="table">
   <thead>
    <tr>
     <th class="bg-white sticky-top border-bottom">FirstName</th>
     <th class="bg-white sticky-top border-bottom">LastName</th>
     <th class="bg-white sticky-top border-bottom">Class</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>John</td>
       <td>Cooker</td>
       <td>A1</td>
     </tr>
     <tr>
       <td>David</td>
       <td>Jeferson</td>
       <td>A2</td>
     </tr>
     ...
  </table>
</div>

Dynamic Bootstrap Table with Fixed Header

Answer №1

Answer №2

Answer №3

Similar questions

What is the correct way to denote a CSS class in SASS syntax?

How can we stop the Bootstrap carousel from pausing when the mouse hovers over it and keep it cycling automatically?

Attempting to link two JavaScript files, however, only one of them is functioning correctly

The Angular ng-repeat directive is populating a list with items, but the parameters enclosed in double curly braces

Optimizing Open Graph tags for sharing WhatsApp links

The cascading style sheet does not have any effect on the layout of the tables within the

Unexpected behavior: getElementById returning URL instead of element

How can I modify the content within a scoped `<style>` tag in Vue?

The Google Maps App fails to launch now

Mastering Data Transfer in jQuery: A Guide to Migrating Event Information from .on(dragstart) to

The wget tool is capable of downloading CSS files that contain @import rules, however it overlooks

Tips for verifying the presence of a 3D model from Spline API within the DOM using Next.js

Tips on confirming the completion of my form when the next button is pressed

Utilizing Font Awesome within the `<fieldset>` element alongside Bootstrap 4 forms

Leveraging the X-Send module for efficiently delivering css, javascript, and image files

Elements displaying outside of block 'a' tag

jQuery Mobile panel buttons are functioning properly within a maximum width of 300 pixels

Issue with AJAX MVC HTML: jQuery value is not blocking API call

Tips for avoiding word fragmentation in <pre> code blocks

Perform a check on the state of the slideToggle using an if-else function and provide a report on the slideToggle state