How to make Bootstrap table with sticky table head?

Last Updated : 07 May, 2024

A Bootstrap table with a sticky table head is a table layout where the header row remains fixed at the top of the viewport while scrolling through the table’s content. This ensures continuous visibility of column headers, improving data readability and navigation within the table.

Syntax:

In the CSS file:

<style>
    .header{
        position:sticky;
        top: 0 ;
    }
</style>

In HTML file:
```
<th class="header" scope="col">
```

Below examples illustrates the approach:

Example 1: In this example we use Bootstrap to create a sticky table header within a container. It presents course information, including name, start date, fees.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" 
          content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
        crossorigin="anonymous" />
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
        </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity=
"sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin="anonymous">
        </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity=
"sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
        crossorigin="anonymous">
        </script>
    <style>
        .header {
            position: sticky;
            top: 0;
        }

        .container {
            width: 600px;
            height: 300px;
            overflow: auto;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <b>Sticky header in table</b>
        <table class="table">
            <thead style="position: sticky;top: 0" class="thead-dark">
                <tr>
                    <th class="header" scope="col">Course</th>
                    <th class="header" scope="col">Start Date</th>
                    <th class="header" scope="col">Fees</th>
                    <th class="header" scope="col">Type</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>CAT</td>
                    <td>1st Aug</td>
                    <td>Free</td>
                    <td>Online</td>
                </tr>
                <tr>
                    <td>GATE</td>
                    <td>5th July</td>
                    <td>Free</td>
                    <td>Online</td>
                </tr>
                <tr>
                    <td>DSA</td>
                    <td>1st July</td>
                    <td>2499</td>
                    <td>Online</td>
                </tr>
                <tr>
                    <td>Java Backend</td>
                    <td>28th March</td>
                    <td>10999</td>
                    <td>Offline</td>
                </tr>
                <tr>
                    <td>SDE</td>
                    <td>1st Sept</td>
                    <td>299</td>
                    <td>Online</td>
                </tr>
                <tr>
                    <td>SUDO Placement</td>
                    <td>20th Sept</td>
                    <td>Free</td>
                    <td>Online</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

Output:

Bootstrap-table-with-sticky-table-head — Bootstrap table with sticky table head Example Output

Example 2: In this example we creates a Bootstrap table with a sticky table head. It uses inline styles to make the table header sticky and includes sample data for courses.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" 
          content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin="anonymous" />
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin="anonymous">
        </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity=
"sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin="anonymous">
        </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity=
"sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin="anonymous">
        </script>
    <style>
        .header {
            position: sticky;
            top: 0;
        }

        body {
            height: 800px;
        }
    </style>
</head>

<body>
    <table class="table">
        <thead style="position: sticky;top: 0" class="thead-dark">
            <tr>
                <th class="header" scope="col">Course</th>
                <th class="header" scope="col">Start Date</th>
                <th class="header" scope="col">Fees</th>
                <th class="header" scope="col">Type</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>CAT</td>
                <td>1st Aug</td>
                <td>Free</td>
                <td>Online</td>
            </tr>
            <tr>
                <td>GATE</td>
                <td>5th July</td>
                <td>Free</td>
                <td>Online</td>
            </tr>
            <tr>
                <td>DSA</td>
                <td>1st July</td>
                <td>2499</td>
                <td>Online</td>
            </tr>
            <tr>
                <td>Java Backend</td>
                <td>28th March</td>
                <td>10999</td>
                <td>Offline</td>
            </tr>
            <tr>
                <td>SDE</td>
                <td>1st Sept</td>
                <td>299</td>
                <td>Online</td>
            </tr>
            <tr>
                <td>SUDO Placement</td>
                <td>20th Sept</td>
                <td>Free</td>
                <td>Online</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Output:

Suggest improvement

How to add table footers with react-bootstrap-table?

Share your thoughts in the comments

How to make Bootstrap table with sticky table head?

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?