Creating Fixed/Sticky Headers for Tables within Tabs in Bootstrap 4

I'm working on a website using Bootstrap 4 and it features multiple tabs with different tables, some of which contain a large amount of data. I am looking to implement a feature where the table header remains fixed at the top of the page as the user scrolls down.

Here's an example showcasing a table on the first tab:

th {
  background: white;
  position: sticky;
  top: 0;
}
<link href="https://getbootstrap.com/docs/4.0/examples/starter-template/starter-template.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#"><img src="" width="165" height="36" alt=""></a>
  <button class="navbar-toggler" type="button" data-toggle="coll... (truncated)

My goal is to keep the headers on each tab fixed so that they remain visible while scrolling through the content. Is this achievable?

htmlcssbootstrap-4

Answer №1

To achieve this effect, apply the position:sticky property to the th elements in your layout.

If you have a fixed element such as a navbar on your page, specify the top property as the height of that element to ensure the sticky behavior:

th {
        background: white;
        position: sticky;
        top: 60px; /* Adjust this value based on your specific layout */
}
<link href="https://getbootstrap.com/docs/4.0/examples/starter-template/starter-template.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">

        <div class="col-md-7">
      
          <table class="table table-striped table-bordered">
            <tr>
              <td width=35%>Ref Number:</td>
              <td width=80%>123456</td>
            </tr>
            <tr>
              <td>Name:</td>
              <td>Acme Corp Pty Ltd</td>
            </tr>
            <tr>
              <td>Job Number:</td>
              <td>5521236987452</td>
            </tr>
            <tr>
              <td>Address:</td>
              <td>21 Jump St, Beverley Hills 90210</td>
            </tr>
            <tr>
              <td>Client:</td>
              <td>Sony Pty Ltd</td>
            </tr>
            <tr>
              <td>State:</td>
              <td>CA </td>
            </tr>
            <tr>
              <td>Inspection Date:</td>
              <td></td>
            </tr>
      
          </table>
      
      
        </div>
      
      </div>
      
      <ul class="nav nav-tabs" id="projectTabs" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="Contacts-tab" data-toggle="tab" href="#Contacts" role="tab" aria-controls="Contacts" aria-selected="true">Contacts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="Contractors-tab" data-toggle="tab" href="#Contractors" role="tab" aria-controls="Contractors" aria-selected="false">Contractors</a>
        </li>
      
      </ul>
      
      
      <div class="tab-content" id="Tabs">
        <div class="tab-pane fade show active" id="Contacts" role="tabpanel" aria-labelledby="Contacts">
      
      
      
          <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>
          <!-- Table content goes here -->
            </tbody>
          </table>
      
      
      
      
        </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamically change the fill color of an SVG using styled-components

I've been attempting to target the fill property of my SVG using CSS in styled-components without any luck. Here is my SVG: <svg width="65" height="19" viewBox="0 0 65 19" fill="none" xmlns="http://www. ...

javascriptcssreactjssvgstyled-components

What could be causing my bootstrap-switch to malfunction?

Here is the snippet of code I am working with: jQuery.each($('.onoffswitch-checkbox'), function(i, slotData) { console.log($(slotData).bootstrapSwitch('state')) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1 ...

javascriptjqueryhtmlbootstrap-switch

Header formatting issue when attempting to implement tablesorter plugin

I implemented the widget-scroller and widget column Selector in my table using the table sorter plugin in jQuery. Has anyone encountered a problem like the one shown in this picture? It seems that my table headers do not align with the columns properly an ...

javascriptjquerycsshtml-tabletablesorter

Tips for aligning a row of images to the right in Bootstrap 4

I have several images that I want to display on the right side in a block. Here is what I attempted: <div class="row" > <div class="float-right"> <img src="1.png"/> <img src="2.jpg"/> ...

htmlcssbootstrap-4alignment

Customize your dropdown menu options with JQuery: A step-by-step guide

I am dealing with a situation where I have a dropdown menu labeled as Code. The options available in this dropdown are fetched from a database, populating the dropdown accordingly. Alongside the Code dropdown, there is a textbox named Name. Under certain c ...

javascriptjqueryhtmldrop-down-menu

Is It Possible to Have Four Equally-Spaced DIVs with Variable Widths?

I am currently facing a challenge in creating a simple sub-navigation system for my website. I want to have either 3 or 4 equally spaced DIVs across the top of the content area. Despite being a common requirement, CSS does not offer straightforward solutio ...

csscss-floathtml

How to Efficiently Organize OpenAI AI Responses Using TypeScript/JavaScript and CSS

I'm using a Next.js framework to connect to the OpenAI API, and I've integrated it seamlessly with an AI npm package. The functionality is incredible, but I've encountered an issue regarding line breaks in the responses. You can find the AI ...

javascriptcssreactjstailwind-cssopenai-api

Sending multiple arguments from an HTML form to a PHP function

Hey, I'm facing a situation where I have an HTML form and I need to pass its value as a parameter to a PHP function. However, there's another value that I need to include which is not even present inside the HTML code. Take this for example: &l ...

phphtmlformsfunctionparameters

The property 'filter' is not recognized on the 'Object' type. An attempt to filter the response was made

Trying to fetch data from a JSON file that matches the player's name in the URL, such as localhost:4200/players/Febiven, should only retrieve information about Febiven. The code is written in Angular 6. The current code snippet is as follows: player ...

htmlangulartypescripthttp

Styling text in JavaScript and CSS with colored fonts and underlines

I am looking to customize the CSS for the font style. <div id="a" onmouseover="chbg('red','b')" onmouseout="chbg('white','b')">This will change b element</div> <div id="b">This is element b</div ...

javascripthtmlcss

Steps to create a div and render all its child elements unselectable

I attempted to create a div along with all its child elements as non-focusable. I initially used a tabIndex of -1 on the main div, but this only resulted in the focus shifting to its first focusable child (as per the default behavior). Is there a workaroun ...

javascripthtmlreactjsfocusaccessibility

There are certain CSS3 properties that are not being accounted for in the CSS min

I've incorporated several newer CSS3 properties in my stylesheet, but I'm concerned that the minification tool I'm currently utilizing may not be capturing all of these properties: .big-blue-button:hover { text-decoration: none; bac ...

javascripthtmlcssminify

Determining the pageY value of a div element with overflow-y styling

Currently, I have implemented a script that tracks the mouse's position upon hover. My goal is to integrate this script within a div that has overflow-y: scroll The script currently utilizes pageY which identifies the position relative to the windo ...

javascriptjquerycss

What is the best way to incorporate a range of details into a div using only jQuery, all while avoiding the use of data-

I'm struggling to find a concise way to explain this, so please bear with me. The information I'm sharing here is all just for example purposes and may sound strange. I have been working on creating a character select page where clicking on a cha ...

javascriptjqueryhtml

React does not allow for images to be used as background elements

I am currently working on a web page and I have attempted to use both jpg and png images as backgrounds, but they do not seem to display on the page. import './Entrada.css' const Entrada = () => { return( <div style={{ b ...

javascriptcssreactjsbackground-image

What is the best way to move the numerical range value into a span element?

How can I implement the "update" function to retrieve the current slider value and transfer it to a Meter element with the message "Value: [current value]". The indicator color should be #ffff00 if the current value is at least 85, otherwise, it should b ...

javascripthtmlcssrange

Is there a way for me to identify the vertical gaps in my code using JavaScript?

Within this specific HTML document, there are multiple div elements that have an absolute positioning applied to them I am looking to develop a JavaScript code that can determine the row of each individual div. I define a row as any space on the vertical ...

javascripthtml

How can I rename attribute values in a dropdown menu and ensure they work properly?

I'm facing an issue with my code. How can I store the option values in a database when they have numbering like value="1" or value="2"? Can I change it to something like value="1000" and have the other select box change to value="250" when selected? ...

javascriptjqueryhtml

Create a video player in your HTML code using the class "afterglow", and also link a separate class to it for additional styling

I'm encountering some challenges with a project that involves a JS file for a Bootstrap modal popup and an HTML5 video player. The issue I'm facing is that I am unable to link the class for the video player theme. Can anyone here assist me in ide ...

javascripthtmlvideo-player

Developing an IF statement in JavaScript that relies on hexadecimal color values

I've created a JavaScript code that changes the background color of my webpage every time it loads: document.getElementById("band").style.background = '#'+(Math.random()*0xFFFFFF<<0).toString(16); To improve visibility, I am aiming t ...

javascripthtml