The table header does not stay in place or remain fixed

My issue lies in using bootstrap, HTML, and CSS. As I scroll, the table header does not move along with the data. I've attempted implementing sticky-top and position-relative without any success.

 <div class="tab-div"><table class="table table-bordered table-hover table-sm table-responsive{-sm|-md|-lg|-xl}">
    <thead class="table-head sticky-top">

        <tr class="tr-tab">
          <td class="text-align-center text-header" >Employee Number</td>
          <td class="text-align-center text-header">Employee Name</td>
          <td class="text-align-center text-header">Designation</td>
          <td class="text-align-center text-header">Department</td>
        </tr>

      </thead>
      <tbody>
          <tr>
              <td><input type="input" name="empNo" readonly class="form-control-plaintext  col-md-1 value="test"/></td>
              <td><input type="input" name="empName" value="test"/></td>
              <td><input type="input" name="empDesig" value="test"/></td>
              <td><input type="input" name="empDept" value="test"/></td>
          </tr>

 <!-- Duplicate Rows Below for Testing Purposes -->

 </tbody>
</table>
</div>

I've explored various tutorials but have yet to find a resolution for my specific problem. Perhaps there is an error in my approach. Can anyone offer guidance on resolving this issue? I've replicated a few rows above for testing purposes.

htmlcssbootstrap-4

Answer №1

Here's a trick to make your table header sticky:

TIP: Remember to apply the "sticky-top" class to the individual TD elements, not the entire thead!

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tab-div">
  <table class="table">
    <thead class="table-head">
      <tr class="tr-tab">
        <td class="text-align-center text-header bg-white sticky-top">Employee Number</td>
        <td class="text-align-center text-header bg-white sticky-top">Employee Name</td>
        <td class="text-align-center text-header bg-white sticky-top">Designation</td>
        <td class="text-align-center text-header bg-white sticky-top">Department</td>
      </tr>

    </thead>
    <tbody>
      <tr>
        <td><input type="input" name="empNo" readonly class="form-control-plaintext col-md-1 value="test" /></td>
              <td><input type="input" name="empName" value="test" /></td>
              <td><input type="input" name="empDesig" value="test" /></td>
              <td><input type="input" name="empDept" value="test" /></td>
          </tr>

 <tr>
              <td><input type="input" name="empNo" readonly class="form-control-plaintext col-md-1 value="test" /></td>
        <td><input type="input" name="empName" value="test" /></td>
        <td><input type="input" name="empDesig" value="test" /></td>
        <td><input type="input" name="empDept" value="test" /></td>
      </tr>
      <tr>
        <td><input type="input" name="empNo" readonly class="form-control-plaintext col-md-1 value="test" /></td>
              <td><input type="input" name="empName" value="test" /></td>
              <td><input type="input" name="empDesig" value="test" /></td>
              <td><input type="input" name="empDept" value="test" /></td>
          </tr>
 <tr>
              <td><input type="input" name="empNo" readonly class="form-control-plaintext col-md-1 value="test" /></td>
        <td><input type="input" name="empName" value="test" /></td>
        <td><input type="input" name="empDesig" value="test" /></td>
        <td><input type="input" name="empDept" value="test" /></td>
      </tr>
      <tr>
        <td>
          <input type="input" name="empNo" readonly class="form-control-plaintext col-md-1 value="test" /></td>
              <td><input type="input" name="empName" value="test" /></td>
              <td><input type="input" name="empDesig" value="test" /></td>
              <td><input type="input" name="empDept" value="test" /></td>
          </tr>

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

I am experiencing issues with my INSERT INTO statement

I've been working on creating a news system that allows users to fill out a form to post an article. However, despite multiple attempts and methods, my INSERT INTO query doesn't seem to be functioning properly. I have two separate files for this ...

phphtmlmysqlinsert-into

Performance issues with jquery addClass and removeClass functions observed in Internet Explorer 11

I am currently working on an application that monitors nodes within a cluster, and I have created a visual state example to demonstrate this. Each small box in the grid represents a node, and when hovering over a node, the rest of the nodes in that particu ...

javascriptjquerycssfrontend

What causes the Material-UI Grid element to shift upon clicking it?

I have encountered an issue while developing a React app with Material UI. The problem arises on a specific page of the application. This particular page consists of text and a button aligned vertically, along with a second set of text and another button ...

cssreactjsflexboxmaterial-uigrid-layout

Troubleshoot: Problem with the name attribute in ASP.NET CheckBox control

When I use a checkbox with the attribute runat="server" in my ASP.NET web application, browsers encounter an issue: Uncaught Syntax error, unrecognized expression: [name=ctl00$ctl00$ContentPlaceHolder1$FormPlaceHolder$CrossFinancing] The ASP.NET code ...

asp.nethtml

Tips for getting rid of the excess space surrounding an image within a div tag

Placing images inside bootstrap card divs within col divs is my current challenge <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"& ...

csstwitter-bootstrap

Tips on concealing the visibility of a table row using PHP

My HTML table structure is quite simple: <style> .demo { width:100%; border:1px solid #C0C0C0; border-collapse:collapse; padding:5px; } .demo th { border:1px sol ...

phphtmlcss

The css values for component _nghost-c0 in an Angular application

Recently, I've been delving into Angular 5 and couldn't help but notice the peculiar html tags with ng generated attributes like _nghost-c0 and _nghost-c1... This got me wondering, what exactly do these attributes signify? [_nghost-c3] .employee ...

cssangularangular5

Text that is inside a grid item will not be cut off using an ellipsis

For some reason, the ellipsis isn't showing up as expected. Instead of truncating with an ellipsis, the text just goes to the next line. text { display: inline; overflow: hidden; text-align: center; text-overflow: ellipsis; } grid { ...

htmlcssoverflow

Can jqplot be used to create this particular graph?

Can the graph be created using jqplot as shown below? The closest graph type is stacked, but there are issues with coloring and point labels. This jsfiddle showcases my attempt to create a bar chart with its legend and point labels. Is it possible to achi ...

javascriptjquerycssjqplot

Tips for resolving vertical alignment styling for images of varying sizes within Vue.js transition-group?

I have created an image slider example, but I'm facing a styling issue when using images of different dimensions. The element leaving the array is positioned absolutely for smooth transitions, but this causes the image to move up. I am trying to vert ...

cssanimationvue.jstransition

Responsive menu not collapsing properly and appearing funky in Drupal

I've managed to create a responsive navigation bar, but I'm encountering two issues. Firstly, when I resize the screen on my test pages, not all of the links hide as expected. Secondly, after inserting the code into Drupal, the nested links appea ...

javascripthtmlcssdrupal

Issue with hyperlinks in HTML not acting as anticipated when in responsive mode

Assisting with a website for someone; not an expert. Modified a free bootstrap template. Desktop mode works perfectly, but in responsive mode, the in-page links behave unexpectedly. Added a margin to the anchor to accommodate the sticky navbar. Used a med ...

htmlbootstrap-4anchor

Text reveal animation in Framer Motion is not functioning as expected

I'm having trouble locating the issue in my code, and the text reveal feature isn't working. Interestingly, a simple animation works fine, indicating that there's no problem with the import or library: import { motion } from ...

cssreactjsnext.jsgsapframer-motion

Can a vertical line be sketched next to a horizontal line?

Let's keep it short and sweet. Here's what I'm attempting to achieve: https://i.sstatic.net/e2ZU2.png Currently, this is what I have: https://i.sstatic.net/cagv7.png Below is the code snippet: #ligne_horizontale_experience { ma ...

htmlcssbootstrap-4

Adding 'invalid-feedback' to 'form-group' in Bootstrap 4 for input validation

Utilizing Bootstrap v4.0.0 for validation on my form group has been working well. For instance, on a change password form, the user is required to input: Old Password New Password New Password (confirm) If the new passwords do not match, the validation ...

bootstrap-4

My index.html not successfully linking to the CSS file

I'm new to this and still learning, so please bear with me. I'm having trouble linking my CSS file to my index.html document in order to create a black banner at the top of the page. I've tried opening it in both Chrome and Explorer but noth ...

htmlcssindexingstylesheet

Text included in the body of an email sent through Outlook

Whenever I click on a specific button, it opens Outlook with the provided details. Additionally, there is a TEXTAREA element containing certain texts. Is there a way to display this text in the body of my Outlook email? Below is the sample code - & ...

javascripthtmloutlook

Verify if the jQuery library has an existing style attribute

I've been working on a script to loop through my form inputs and check for the presence of the style attribute. Despite feeling like I'm close to getting it right, there seems to be an issue with my code. There are actually only 2 inputs with the ...

javascriptjqueryhtmlcss

Express JS is experiencing difficulties with the functionality of the iframe

When I'm using iframe in HTML, it works perfectly fine: <iframe src="main.html" height="100px"></iframe> But when I use Iframe in Express, it shows an error: <iframe src="main.html" height="100px&qu ...

javascripthtmlexpress

Connecting images and text from a distance

After days of researching this topic, I have not found any solutions that align exactly with what I am trying to achieve. I believe it should be a simple task using just HTML and CSS, but I seem to be facing some difficulties. Initially, my goal was to ma ...

htmlcss