How to fix table header in HTML using CSS?

One approach to fix the table header in HTML is by using CSS positioning. We can set the table header <th> to have a fixed position and then adjust the top position so that it appears at the top of the table regardless of the scrolling.

.table-container thead th {
     position: sticky;
     top: 0;
     background-color: #f9f9f9;
 }

1. The .table-container class is used to create a container with a fixed height and a vertical scroll if the table content overflows.
2. The position: sticky property is applied to the table header to make it sticky.
3. The top: 0 property ensures that the table header stays at the top of the container when scrolling.
4. The background-color property sets the background color of the table header to differentiate it from the table body.
5. The table body content should be placed inside the <tbody> tag within the <table> element.

Method 2: Using JavaScript and CSS Class Toggle#

Another approach is to use JavaScript to toggle a CSS class when scrolling. This class will fix the table header position and update its styles accordingly.

    window.addEventListener('scroll', function() {
        var table = document.querySelector('.table-container table');
        var header = table.querySelector('thead');

        if (window.pageYOffset > table.offsetTop) {
            header.classList.add('sticky-header');
        } else {
            header.classList.remove('sticky-header');
        }
    });

1. The .sticky-header class is defined with the necessary styles to make the table header sticky.
2. The JavaScript code adds an event listener to the window object, which triggers when scrolling occurs.
3. Inside the event listener, it checks if the current vertical scroll position is greater than the offset top of the table.
4. If the condition is true, the sticky-header class is added to the table header using header.classList.add('sticky-header') , which fixes its position.
5. If the condition is false, the sticky-header class is removed using header.classList.remove('sticky-header'), restoring the default position.

Method 3: Using jQuery Plugin #

Another approach is to use a jQuery plugin like DataTables, which provides extensive table functionality, including fixed table headers with scrolling support.

1. The DataTables library is included via the CDN links in the head section of the HTML file.
2. The table element is given an id of myTable for easy targeting with jQuery.
3. In the JavaScript section, the $(document).ready() function is used to ensure the DOM is fully loaded before initializing the DataTable.
4. The $('#myTable').DataTable() function is called to initialize the DataTable on the table element.
5. Various options can be provided within the function call to customize the DataTable's behavior, such as enabling vertical scrolling (scrollY), collapsing the scrollbars when not needed (scrollCollapse), disabling pagination (paging), and enabling fixed headers (fixedHeader).