'Bootstrap 4 - Make a Table Header Sticky

I have a simple Bootstrap 4 Table and would now like to make the header fixed/sticky so that it doesn't scroll as it contains a lot of rows. I've found several references to this issue but have played around with adding custom CSS but nothing I've tried has worked so far.

Here's an example of my table:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-striped table-hover table-bordered">
                        <thead>
                            <th scope="col">Name</th>
                            <th scope="col">Title</th>
                            <th scope="col">Code</th>
                        </thead>
                          <tbody>

        <tr id="211140">
                            <td><a href="view.php?action=viewDetails&ID=PM5281"> Jaxon Copeley</a></td>
             
            <td>Senior Designer</td>
            <td>8</td>
        </tr>
                <tr id="212265">
                            <td><a href="view.php?action=viewDetails&ID=PM4102"> Sean Dacey</a></td>
             
            <td>Associate</td>
            <td>1687</td>
        </tr>
                <tr id="212364">
                            <td><a href="view.php?action=viewDetails&ID=PM5448"> Nathan Giffen</a></td>
             
            <td>Senior Designer</td>
            <td>273.8</td>
        </tr>
                <tr id="212312">
                            <td><a href="view.php?action=viewDetails&ID=PM6256"> Tristan Godson</a></td>
             
            <td>ProjePM Designer </td>
            <td>85.75</td>
        </tr>
                <tr id="207542">
                            <td><a href="view.php?action=viewDetails&ID=PM6123"> Anthony McAulay</a></td>
             
            <td>Designer</td>
            <td>566.2</td>
        </tr>
                <tr id="207990">
                            <td><a href="view.php?action=viewDetails&ID=PM5466"> Gabriella Schofield</a></td>
             
            <td>Senior Designer</td>
            <td>107</td>
        </tr>
                <tr id="213479">
                            <td><a href="view.php?action=viewDetails&ID=PM6513"> Hayden Giblin</a></td>
             
            <td>Senior Associate Creative Designer - Head Of Graphic Design</td>
            <td>60</td>
        </tr>
                <tr id="208423">
                            <td><a href="view.php?action=viewDetails&ID=PM5313"> Archer Doolan</a></td>
             
            <td>Associate</td>
            <td>487.9</td>
        </tr>
                <tr id="208468">
                            <td><a href="view.php?action=viewDetails&ID=PM4330"> Taylah Hutcheon</a></td>
             
            <td>Senior Associate</td>
            <td>5</td>
        </tr>
                <tr id="212645">
                            <td><a href="view.php?action=viewDetails&ID=PM0038"> Hayley Hodgson</a></td>
             
            <td>DirePMor</td>
            <td>37</td>
        </tr>
                <tr id="214303">
                            <td><a href="view.php?action=viewDetails&ID=PM4237"> Henry Powell</a></td>
             
            <td></td>
            <td>9</td>
        </tr>
         

                    </tbody>
                </table>

Solution 1:^[1]

You can simply add the position: sticky css property to the th Like in the example below:

And also don't forget to define the top positioning to avoid it messing with your design

th {
  background: white;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-striped table-hover table-bordered">
                        <thead>
                            <th scope="col">Name</th>
                            <th scope="col">Title</th>
                            <th scope="col">Code</th>
                        </thead>
                          <tbody>

        <tr id="211140">
                            <td><a href="staffDetails.php?action=staffLink&contactID=CT5281"> Jaxon Copeley</a></td>
             
            <td>Senior Designer</td>
            <td>8</td>
        </tr>
                <tr id="212265">
                            <td><a href="staffDetails.php?action=staffLink&contactID=CT4102"> Sean Dacey</a></td>
             
            <td>Associate</td>
            <td>1687</td>
        </tr>
                <tr id="212364">
                            <td><a href="staffDetails.php?action=staffLink&contactID=CT5448"> Nathan Giffen</a></td>
             
            <td>Senior Designer</td>
            <td>273.8</td>
        </tr>
                <tr id="212312">
                            <td><a href="staffDetails.php?action=staffLink&contactID=CT6256"> Tristan Godson</a></td>
             
            <td>Project Designer </td>
            <td>85.75</td>
        </tr>
                <tr id="207542">
                            <td><a href="staffDetails.php?action=staffLink&contactID=CT6123"> Anthony McAulay</a></td>
             
            <td>Designer</td>
            <td>566.2</td>
        </tr>
                <tr id="207990">
                            <td><a href="staffDetails.php?action=staffLink&contactID=CT5466"> Gabriella Schofield</a></td>
             
            <td>Senior Designer</td>
            <td>107</td>
        </tr>
                <tr id="213479">
                            <td><a href="staffDetails.php?action=staffLink&contactID=CT6513"> Hayden Giblin</a></td>
             
            <td>Senior Associate Creative Designer - Head Of Graphic Design</td>
            <td>60</td>
        </tr>
                <tr id="208423">
                            <td><a href="staffDetails.php?action=staffLink&contactID=CT5313"> Archer Doolan</a></td>
             
            <td>Associate</td>
            <td>487.9</td>
        </tr>
                <tr id="208468">
                            <td><a href="staffDetails.php?action=staffLink&contactID=CT4330"> Taylah Hutcheon</a></td>
             
            <td>Senior Associate</td>
            <td>5</td>
        </tr>
                <tr id="212645">
                            <td><a href="staffDetails.php?action=staffLink&contactID=CT0038"> Hayley Hodgson</a></td>
             
            <td>Director</td>
            <td>37</td>
        </tr>
                <tr id="214303">
                            <td><a href="staffDetails.php?action=staffLink&contactID=CT4237"> Henry Powell</a></td>
             
            <td></td>
            <td>9</td>
        </tr>
         

                    </tbody>
                </table>

Solution 2:^[2]

At first your yhead needs to be sticky and sticky position only works after you add top or bottom to it

Give your thead a class name like my-thead

write style like this

.my-thead{
    position: sticky;
    top: 0;
    background: white;
}

Solution 3:^[3]

You can apply position:sticky; top:0 for your thead and th to achieve this.

.header {
position:sticky;
top:0
}
thead th {
background:#666;
color:white;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<table class="table table-striped table-hover table-bordered">
                        <thead class="header">
                            <th class="header" scope="col">Name</th>
                            <th class="header" scope="col">Title</th>
                            <th class="header" scope="col">Code</th>
                        </thead>
                          <tbody>

        <tr id="211140">
                            <td><a href="view.php?action=viewDetails&ID=PM5281"> Jaxon Copeley</a></td>
             
            <td>Senior Designer</td>
            <td>8</td>
        </tr>
                <tr id="212265">
                            <td><a href="view.php?action=viewDetails&ID=PM4102"> Sean Dacey</a></td>
             
            <td>Associate</td>
            <td>1687</td>
        </tr>
                <tr id="212364">
                            <td><a href="view.php?action=viewDetails&ID=PM5448"> Nathan Giffen</a></td>
             
            <td>Senior Designer</td>
            <td>273.8</td>
        </tr>
                <tr id="212312">
                            <td><a href="view.php?action=viewDetails&ID=PM6256"> Tristan Godson</a></td>
             
            <td>ProjePM Designer </td>
            <td>85.75</td>
        </tr>
                <tr id="207542">
                            <td><a href="view.php?action=viewDetails&ID=PM6123"> Anthony McAulay</a></td>
             
            <td>Designer</td>
            <td>566.2</td>
        </tr>
                <tr id="207990">
                            <td><a href="view.php?action=viewDetails&ID=PM5466"> Gabriella Schofield</a></td>
             
            <td>Senior Designer</td>
            <td>107</td>
        </tr>
                <tr id="213479">
                            <td><a href="view.php?action=viewDetails&ID=PM6513"> Hayden Giblin</a></td>
             
            <td>Senior Associate Creative Designer - Head Of Graphic Design</td>
            <td>60</td>
        </tr>
                <tr id="208423">
                            <td><a href="view.php?action=viewDetails&ID=PM5313"> Archer Doolan</a></td>
             
            <td>Associate</td>
            <td>487.9</td>
        </tr>
                <tr id="208468">
                            <td><a href="view.php?action=viewDetails&ID=PM4330"> Taylah Hutcheon</a></td>
             
            <td>Senior Associate</td>
            <td>5</td>
        </tr>
                <tr id="212645">
                            <td><a href="view.php?action=viewDetails&ID=PM0038"> Hayley Hodgson</a></td>
             
            <td>DirePMor</td>
            <td>37</td>
        </tr>
                <tr id="214303">
                            <td><a href="view.php?action=viewDetails&ID=PM4237"> Henry Powell</a></td>
             
            <td></td>
            <td>9</td>
        </tr>
         

                    </tbody>
                </table>

Solution 4:^[4]

Simply position: sticky; top: 0; your th elements.

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

Solution 5:^[5]

Since you said you're using a Bootstrap 4 Table, Bootstrap's CSS already includes a .sticky-top predefined class, so you don't need to add a new class in your own CSS for the magic to happen, all you need is to add the existing Bootstrap class to your own code:

<!-- [your own code here, including Bootstrap's CSS] -->

<table class="table table-striped table-hover table-bordered">
  <thead>
    <th class="sticky-top" scope="col">Name</th>
    <th class="sticky-top" scope="col">Title</th>
    <th class="sticky-top" scope="col">Code</th>
  </thead>
  <tbody>

  <!-- [more of your code] -->

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Colorado Akpan
Solution 2
Solution 3	Suresh Ponnukalai
Solution 4	Md Nuruzzaman
Solution 5	Gwyneth Llewelyn

'Bootstrap 4 - Make a Table Header Sticky

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]