How To Make Bootstrap Table With Sticky Table Head

Posted By Bajarangi soft , Posted On 12-10-2020

Tables that can be used for aligning/recording data properly but sometimes it happens that the data in the table is too long so in order to read the data properly the header respective to various columns should be available all the time while traversing the table. In such cases, a sticky table head is required to make the table more informative and accurate which can be implemented using CSS attributes

1.Position and top of the elements of the head row
Syntax
IN For HTML

<th class="header" scope="col">

IN CSS File

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

Example 2 Table at the top with long list of columns and a fixed header.

<!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: darkred;
        }
    </style>
</head>

<body><br>
<div class="container">
    <h1>BAJARANGI SOFT</h1>
    <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>

</body>

</html>

Example 2 Header with a text followed by table with a sticky header.

<!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>

Related Post

What Is The Use Of CSRF Protection In Laravel Framework
How to crerate a Register form easily by using Html,Css and Bootstrap
how to create a register form using css and html and bootstrap
How Can I Create Register Form By Using Html and Css and Bootstrap
How To Create a Register From Just by Using Html and Css and Bootstrap
Different CSS Styles Describes How HTML Elements Should Displayed
How Many Types Of Selectors Are There In CSS
What Is The Difference between Borders and Outline in Css
How Do I Use Text and Font Styles In Css With Examples
How To Give Link To a Text Using Css In Html
How Do You Create a Table In Css
How To Use CSS Style Transition Properties With JavaScript