Sticking Table Headers in Bootstrap 4

Question

Sticking Table Headers in Bootstrap 4

I'm struggling with making the header of my Bootstrap 4 table fixed/sticky so that it doesn't scroll along with the content. I've tried adding custom CSS but haven't been successful so far.

Here's a snippet of the code for 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>
            [additional rows from original text]
        </tbody>
</table>

html css bootstrap-4

Answer 1

Answer №1

You can easily implement the position: sticky css rule to the th as shown in the example below:

Make sure to also set the top property correctly to prevent any design issues.

th {
  background: white;
  position: sticky;
  top: 0; /* Make sure to include this for proper 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>

Answer 2

You can easily implement the position: sticky css rule to the th as shown in the example below:

Make sure to also set the top property correctly to prevent any design issues.

th {
  background: white;
  position: sticky;
  top: 0; /* Make sure to include this for proper 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>

Answer 3

Answer №2

Initially, your thead must have stickiness in mind, and sticky positioning will only take effect once you include either top or bottom

Assign a class name to your thead, such as my-thead

Implement the style like this

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

Answer 4

Initially, your thead must have stickiness in mind, and sticky positioning will only take effect once you include either top or bottom

Assign a class name to your thead, such as my-thead

Implement the style like this

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

Answer 5

Answer №3

To achieve a sticky header for your table, you can use the following CSS:

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

Make sure to include the necessary Bootstrap and jQuery libraries in your HTML:

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

Then, apply the "header" class to the <thead> tag of your table:

<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>
            <td>John Doe</td>
            <td>Developer</td>
            <td>12345</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>Designer</td>
            <td>54321</td>
        </tr>
    </tbody>
</table>

Answer 6

To achieve a sticky header for your table, you can use the following CSS:

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

Make sure to include the necessary Bootstrap and jQuery libraries in your HTML:

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

Then, apply the "header" class to the <thead> tag of your table:

<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>
            <td>John Doe</td>
            <td>Developer</td>
            <td>12345</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>Designer</td>
            <td>54321</td>
        </tr>
    </tbody>
</table>

Answer 7

Answer №4

To keep your table headers in place, use the CSS property position: sticky; top: 0; on your th elements.

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

/* Standard styling for tables */
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>

Answer 8

To keep your table headers in place, use the CSS property position: sticky; top: 0; on your th elements.

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

/* Standard styling for tables */
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>

Answer 9

Answer №5

If you are utilizing a Bootstrap 4 Table, you can take advantage of Bootstrap's pre-existing CSS that includes a .sticky-top predefined class. This means there is no need to create a new class in your own CSS for the desired effect; all you have to do is incorporate the existing Bootstrap class into your code:

<!-- [your own code here, with Bootstrap's CSS as well] -->

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

  <!-- [additional code goes here] -->

Answer 10

If you are utilizing a Bootstrap 4 Table, you can take advantage of Bootstrap's pre-existing CSS that includes a .sticky-top predefined class. This means there is no need to create a new class in your own CSS for the desired effect; all you have to do is incorporate the existing Bootstrap class into your code:

<!-- [your own code here, with Bootstrap's CSS as well] -->

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

  <!-- [additional code goes here] -->

Sticking Table Headers in Bootstrap 4

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Flashing white when transitioning background images

Removing the Yellow Highlight on Input Field Following Email Autocomplete in Chrome

Learn how to efficiently import scripts and styles from WordPress plugins with the help of the wp_enqueue_script function

Having a Jquery resizing problem? No worries! When the width is less than 768, simply enable the click option. And when the width is

Is it possible to establish a connection between Firebase Storage and HTML using TypeScript without Angular or React in IntelliJ?

Designing HTML columns to adapt to different screen resolutions

Adjusting image size as you scroll

Developing a custom mixin to alert a banner at the top of the webpage

Datetimepicker initialization with default start date

Ways to automatically insert an icon within a textarea

Is there a way to move the bootstrap carousel item captions outside of the image without having to set a specific height for the carousel manually?

Ensuring XHTML W3C Compliance with multiple details in src attribute

JavaScript: table is not defined

Displaying the value of a jquery variable in an HTML document

Navigating between pages using the ExpressJS and Angular 1 routing system

The process of manipulating the content of an HTML textarea using Selenium with Python

Cross-Browser Compatibility of CSS

displaying the description of a Wordpress category

Manipulating contextual selectors

How to perfectly position an image within a fixed full screen container