Ensure the header remains fixed when scrolling in an HTML page with Bootstrap

I created the following code. However, when I scroll down the table, the header disappears from view. I would like the header to always remain at the top, even when scrolling.

Despite searching Google multiple times and trying various solutions, I have not been able to resolve this issue successfully.

I would appreciate any assistance.

Here is my current code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="htttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>
<body>

<div class="container">
  <h2>Striped Rows</h2>

  <table class="table table-striped">

  <div>



    <thead>
  ... (Code continues)

Thank you for your help!

Answer №1

Check out the code snippet below which utilizes bootstrap's affix

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  .affix {
      top: 0;
      width: 100%;
      z-index: 9999 !important;
        background-color: #fff;
  }
</style>

</head>
<body>

<div class="container">
  <h2>Striped Rows</h2>

  <table class="table table-striped">
   
    <thead data-spy="affix" data-offset-top="0">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
        <th>Email</th>
        <th>Email</th>
        <th>Email</th>
        <th>Email</th>
        <th>Email</th>
        <th>Email</th>
        <th>Email</th>
        <th>Email</th>
        <th>Email</th>


      </tr>
    </thead>

    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7812171016381d00191508141d561b1715">[email protected]</a>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad0d5d2d4fadfc2dbd7cad6df94d9d5d7">[email protected]</a>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="741e1b1c1a34110c15190418115a171b19">[email protected]</a>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="741e1b1c1a34110c15190418115a171b19">[email protected]</a>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="deb4b1b6b09ebba6bfb3aeb2bbadadadadf0bdb1b3">[email protected]</a>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63090c0b0d23061b020e130f064d000c0e">[email protected]</a>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2943464147694c51484459454c074a4644">[email protected]</a>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="761c191e1836130e171b061a135815191b">[email protected]</a>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf1f4f3f5dbfee3faf6ebf7feb5f8f4f6">[email protected]</a>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80eaefe8eec0e5f8e1edf0ece5aee3efed">[email protected]</a>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fe5e0e7e1cfeaf7eee2ffe3eafcfcfcecececac989fa9d86836462">[email protected]</a>

      </tr>
      ...
      ... Additional rows truncated for brevity
      ...
    </tbody>
  </table>
</div>



</body>

</html>

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

Unusual discovery within JQuery and IFrames

Let's set the stage. function scrollLog(line) { // Let's assume it's for Firefox // alert("weird"); frames['log'].find(line); }; There's a function that I trigger when the document is ready. The current code doesn&a ...

Differences Between APP_INITIALIZER and platformBrowserDynamic with provide

I've discovered two different approaches for delaying an Angular bootstrap until a Promise or Observable is resolved. One method involves using APP_INITIALIZER: { provide: APP_INITIALIZER, useFactory: (configService: ConfigurationService) => ( ...

Connect to the MongoDB database running on localhost using the mongoose library

I am currently learning about the MEAN stack through this helpful tutorial. However, the tutorial assumes a connection to a remote mongodb installation. I have MongoDB already set up and running on my CentOS7 localhost. To modify the mongoose connect line ...

A dynamic JQuery carousel displaying a variety of albums

I'm searching for a jQuery gallery or slider that can accommodate multiple albums without needing to load a new page each time. I don't need anything too fancy, just the ability to have links above the content. I have knowledge in html, css, and ...

Excessive white space on WordPress pages is creating a less than ideal

On my WordPress page, I have set up a row with the main side at span10 and the right sidebar at span2. However, the layout leaves too much blank space, causing users to scroll to the right and see nothing. You can view the specific page here Below is the ...

Extract information from a JSON string stored in a variable and transform it into objects within the $scope.variable

I currently have a string variable that contains JSON data displayed below. var jsonstring = [{"latitude":"51.5263","longitude":"-0.120285","altitude":"","device":"123","rating":"5","region":"Europe","customer":"","time":"1-2 Weeks","error":"Error 1","app ...

Change this npm script into a gulp task

I have a script in npm that I would like to convert into a gulp task. "scripts": { "lint": "eslint .", "start": "npm run build:sdk && node .", "posttest": "npm run lint && nsp check", "build:sdk": "./node_modules/.bin/lb- ...

Troubleshooting a Codeigniter issue with CSRF and jQuery ajax

Having trouble with posting data using ajax? I keep running into an error related to CSRF and despite my efforts, I have not been able to find a solution. Can someone please assist me with this issue? Here is the error message I am consistently receiving: ...

What are the steps to overlay a button onto an image with CSS?

As a CSS newbie, I have a question that may seem silly or straightforward to some. I am struggling with placing a button over an image and need guidance on how to achieve this effect. Specifically, I want the button to appear like this blue "Kopit" button ...

What is the best way to sort an array based on a person's name?

I have a list of different groups and their members: [ { "label": "Group A", "fields": [ { "value": "color1", "name": "Mike" }, { &quo ...

Using Vue.js data with an erb link_to tag

Currently, I am developing a Rails application where one page utilizes Vue.js to load a Google map, make some API calls with Axios, and gather user values using Vue.js. My goal is to pass these values as parameters within a "link_to" erb tag. Please refer ...

Trouble with Selenium Webdriver executing Custom Ribbon Button

I encountered an issue while trying to click on a Custom Ribbon MSCRM2011 Button in an automation script I'm writing. Below is the HTML structure: <li id="contact|NoRelationship|Form|Mscrm.Form.contact.MainTab.ExportData" class="ms-cui-group" unse ...

Mobile Device Experiencing Constant Resizing Issues on Website

I have been working on my website for almost a year now, and I am facing an issue with its responsiveness on mobile devices. Despite using Bootstrap 4 and Ajax to load pages and modals, I can't seem to figure out what's causing the problem. Befor ...

When a link is entered into a textbox, the desired outcome is for it to display as a clickable link when viewed on a web page

I am looking to create a text box where I can input a link, store it in a MySQL database using PHP, and then display the link on a PHP page so that it behaves like the original link. For example: <form> <input type="" name="text" /> <input ...

What is the reason for DialogContent displaying a scroll bar instead of expanding further when nested Grids with spacing are included?

My current project involves working on a form displayed in a dialog window. To adjust the layout of the form's fields, I utilize multiple Grid elements nested within another Grid. However, I've encountered an issue where adding any spacing to the ...

Displaying a spinner within Bootstrap tabs to indicate content is loading via ajax

Using Bootstrap 3 tabs and AJAX to load tab content can sometimes result in slower loading times. To address this issue, it would be beneficial to incorporate a spinner within the tab content to indicate that the server is processing the request. Is there ...

What is the best way to receive a user's input date in Dynamics 365 using HTML/JavaScript?

My HTML webform is set up to capture user input like address, card number, city, and state in text format. However, within Microsoft Dynamics 365, I have a custom entity with fields for this information. When a user completes the webform and submits it, a ...

Determining the Nearest Form to an Element using jQuery

I developed a JavaScript/jQuery script that allows me to check all checkboxes within a form. The function works effectively, but the issue is that it checks all checkboxes on the page regardless of their form wrapper. Here is the function: function toggl ...

Developing dynamic 3D cubes

In my latest project, I am attempting to construct a unique structure composed of 3D cubes arranged in a stacked formation. Each of the individual cubes within this structure is designed to be interactive for users. When a user hovers over a cube, it trigg ...

"Securing Your Web Application with Customized HTTP Headers

I'm currently working on setting up a POST request to a REST API (Cloudsight) with basic authorization. Here is the code I have so far: var xhr = new XMLHttpRequest(); xhr.open("POST", "http://api.cloudsightapi.com/image_requests", true); xhr.setRequ ...