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

AJAX loading footer content before images are fully loaded

I am a beginner when it comes to ajax and I'm facing an issue where the footer loads before the images, causing the images to overlap the footer. The problem is illustrated in the image below. <!doctype html> <html lang="en"> <head ...

Issue with AngularJS ng-model not updating the value of a hidden input

My goal is to transmit form data using hidden input like this: <input type="hidden" required ng-model="formHolder.template[position].itemKey[itr]" ng-value="[[ formItem ]]" /> The value of formItem can be any string. Issues arise when the strings c ...

Implementing a class change to anchor elements when rearranging them

I have 4 divs and their corresponding anchor tags. The active class is dynamically added to anchors on scroll unless the order of the display elements changes. In that case, active classes are only applied to the sorted elements. I also sorted the nav anch ...

Deep-diff JavaScript functions are not permissible for use

In my AngularJS application, I am currently attempting to utilize a JavaScript package. To reference it in my index.html file, I added the following code: <script src="deep-diff-0.3.1.min.js"></script> Furthermore, in my controller, I am usin ...

Choosing elements in jQuery

Having some trouble with the subnav on my current website project. I think the issue lies in how I am selecting items in my jquery code. It seems like a small fix that needs to be made, but I'm unsure of the correct approach. http://jsfiddle.net/ZDEr ...

Continuously receiving the "Add to home screen" prompt despite already installing the PWA app

Is there a method to determine if the Progressive Web App has already been installed? It is possible to cancel the prompt event in the 'beforeinstallprompt' event. window.addEventListener('beforeinstallprompt', (event) => { // co ...

Clicking the popup form causes it to blur out

Having trouble with a blurry pop-up form when clicking the button? Check out the code I've used below: <button class="btn btn-default" data-toggle="modal" data-target="#myModal">ENQUIRE NOW</button> ...

When using margin-right and a width of 100% in the WordPress backend, a scrollbar may be triggered

I have been working on developing a configuration page for my WordPress plugin. In order to display the content, I included an <ul> element inside a <div> container and added it to the configuration page. However, I encountered an issue where a ...

Design adaptable HTML backgrounds

Hello, I am working on a webpage that uses two background images. Here is the CSS I'm using: body{ background: url('<?=base_url();?>/assets/header_bg.png') no-repeat, url('& ...

Prevent webpage from resizing when window dimensions change

Whenever I resize my webpage window, the elements start to pile on top of each other and it looks disorganized. For example, when I reduce the window size, YouTube just cuts off everything instead of stacking the images. How can I achieve a similar effec ...

Angular Kendo dropdownlist and input textbox are not working together as anticipated

I'm looking to implement a dropdown list similar to Google search using Kendo Angular. However, I've encountered an issue where entering text in the textbox and pressing "Enter" passes the first matching value from the dropdown list to my compone ...

Navigating through Vue Router with Dynamic Imports and Guards

I am looking to dynamically bring in data from a component file into a router file, and then allow the use of next() based on the value of the imported data. In my App.vue file, I am using this.$router.push({name: "Dashboard"}) when the data changes from ...

Encountered an issue while attempting to include multiple JavaScript sources. Please review your configuration settings for the javascripts.join

While setting up a basic app using phoenix-elixir and brunch, encountering the following error: 23 Mar 10:18:10 - warn: node_modules/phoenix/priv/static/phoenix.js compiled, but not written. Check your javascripts.joinTo config 23 Mar 10:18:10 - war ...

Tips for displaying autocomplete suggestions as clickable links?

I am new to using Ajax and trying to figure out how to display autocomplete results as clickable links. I have managed to list the related results, but I am struggling to add the links. I believe the links need to be added within the script as an HTML tag. ...

A layout featuring nested buttons and links within a card element, utilizing the power of Link in NextJs

After extensive searching on S.O., I have been unable to find a solution that works flawlessly. The issue at hand involves a card component in a NextJs application that is encompassed within a <Link> tag. Additionally, there is another <Link> t ...

Issues with Node AssertionErrors cause failures to be silent and prevent proper error output

I am facing an issue with a particular method in my code. The code snippet is as follows: console.log('Trouble spot here') assert(false) console.log('Will this show up?') Upon running this code within my application, the followi ...

Unable to begin the previous project on my Mac, but it functions properly on Windows

After running npm i, I encountered the following error message which I am unsure how to resolve. I tried reinstalling Node.js, Python, and Pyenv, but the issue persists. Interestingly, the same version of Node.js on Windows runs the project without any p ...

The system displayed an 'Error' stating that the variable 'index' is defined in the code but is never actually utilized, resulting in the (no-unused-vars) warning

I have configured eslint and eslint-plugin-react for my project. Upon running ESLint, I am encountering no-unused-vars errors for every React component in the codebase. It seems like ESLint is not properly identifying JSX or React syntax. Any suggestions ...

The jQuery AJAX function appears to be unresponsive and failing to execute

I have a form that needs to update values on click of a radio button. Unfortunately, my jQuery skills are lacking. Here's what I have tried so far: HTML: <form> <input type="radio" checked="true" id="q1r1" name="q1" value="Awesome"> ...

Guidelines on concealing the parent component while the child component is loading in Angular 2

In my latest project, the view setup is as follows: Upon page load, the Parent Item Description should be visible while the Selected sub item description remains hidden. When a Sub Item x is selected, the Parent Item Description should disappear and only ...