Tips for locking the position of a table header and allowing only the table body to scroll

I have designed a table with tbody consisting of 2 tr elements. One tr is used for hiding/showing data.

I am trying to keep the Table header fixed while only scrolling the table body. However, as I am using angular js ng-repeat on the tbody, I am encountering difficulty in achieving the desired scrolling effect.

The desired output should be similar to this example: Sample output with scrollable table body

My current Table structure looks like this:

<thead>
</thead>
<tbody ng-repeat="a in arr">
 <tr>
 </tr>

 <tr>
 </tr>
<tbody>

HTML FILE

            <thead>
                <tr>
                    <th style="text-align: center;">Edit</th>
                    <th style="text-align: center;">Case ID</th>
                    <th style="text-align: center;">Company Name</th>

                </tr>
                <tr>
                    <th colspan="8"><input  class="form-control"
                        placeholder="Search ..." type="text" id="search" ng- 
                  model="search.compyNmeEnteredByBDO"/></th>
                </tr>
            </thead>
          <tbody ng-repeat="newOpportunity in opportunitycopy >

                <tr>
                  <td>
                <label> <input type="checkbox" value="" ng- 
                          model="newOpportunity.isSelected"> <span
                                class="cr"><i class="cr-icon glyphicon 
                         glyphicon-ok"></i></span>

                            </label>
                  </td>
                    <td>
                        &nbsp;
                        {{newOpportunity.id}}   
                    </td>
                    <td>
                        {{newOpportunity.compyNmeEnteredByBDO}} 
                    </td>




                </tr>

                 <tr ng-show="newOpportunity.hidestatus">

                    <td colspan="8">
                            <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="ibox" id="mailbox-container">
                                <div class="mailbox-header d-flex justify-content-between"
                                    style="border-bottom: 1px solid #e8e8e8;">
                                    <div>
                                        <h5 class="inbox-title">Details</h5>
                                    </div>
                                </div>
                                <div class="mailbox-body">
                                    <form>
                                        <div class="row">
                                        <div class="col-sm-2 form-group">
                                                <label>Quantum</label> <input type="text" readonly
                                                    class="form-control" value="{{newOpportunity.quntm}}">
                                            </div>
                                        </div>
                                        <div class="row">

                                        </div>
                                        <div class="row">
                                        <div class="col-sm-2 form-group">
                                                <label>Remarks</label> <input type="text" readonly
                                                    class="form-control" value="{{newOpportunity.remarks}}">
                                            </div>
                            </div>

                                </div>
                            </div>
                        </div>
                    </div>


                </tr>
            </tbody>

Answer №1

To achieve this, you can use the position: sticky; property in your CSS.

table thead tr th {
  background-color: orange;
  position: sticky;
  top: -1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<table class="table">
  <thead>
    <tr>
      <th>column1</th>
      <th>column2</th>
      <th>column3</th>
      <th>column4</th>
    </tr>
  </thead>
  <tbody>
  <!-- Table body content here -->
</table>

Answer №2

If you want to accomplish this, you should consider the following steps.

Assign a specific height to your tbody and set overflow property to scroll with overflow-y:auto; to achieve the desired outcome.

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

choose the initial element within a class

Seeking a way to target the first element within each group of the same class? Consider the following scenario: <div class="group"> <div class="element"></div> <div class="element"></div> <div class="element"&g ...

How can I prevent my mouse click from being overridden by my mouse hover?

Currently, I am developing a Sudoku game using JavaScript and facing some challenges with mouse events. My goal is to enable users to hover over a square and have it change color, as well as click on a square to highlight the entire row, column, and quadra ...

Enhance the appearance of the navbar on mobile devices by customizing the styling in Bootstrap 5

Hi everyone, this is my first time posting a question here so please be gentle :) I recently implemented a script to change the CSS of my navbar when scrolling. window.addEventListener("scroll", function () { let header = document.querySelector(".navbar") ...

Implementing reCAPTCHA and PHP for Email Form Submission

Currently using GoDaddy as the web host for my website. Struggling to integrate reCAPTCHA into the email form on my site. I successfully pass the reCAPTCHA test, but emails are not being sent. So far, the website has been built using PHP and HTML only. ...

Implement CSS to stack images upon zooming

On my menu page, I have two images that I want to display side by side in the web browser and stacked on top of each other in a column when viewed on mobile. Currently, with framework7's row and column classes, the images are positioned next to each o ...

Sliding Menu with jQuery

My goal is to create a dynamic menu that reveals sub-menu items by sliding them down and changing the background color upon clicking. I am currently using the HTML code displayed below, with the sub1 and sub2 elements initially hidden using display:none; ...

I must break free! Angular's $sce is failing to manage links to audio files (Strict Contextual Escaping)

I have successfully implemented Angular and $sce in my project to handle HTML special characters and link video files in the database to a video player. However, I am facing issues connecting the HTML audio player to audio files stored in the same database ...

Facing a selection list issue on a web application built with Flask and Vue.js

I'm trying to integrate Flask and Vue.js together, but I've encountered an issue with my select element. The following code snippet is present in my HTML file: <div class="col-sm-10"> <select class="form-select" v-mod ...

AngularJS - How to loop through a div to display all items

I am working with AngularJS to create a repeatable shopping cart items feature. Below is a sample JSON data structure: [{"src": "img/T1.jpg", "itemname": "solid green cotton tshirt", "style": "MS13KT1906", "colour": "Blue", "size": "s", "qty": "1", "price ...

Switch out the arrow icon in the dropdown menu with an SVG graphic

Looking for a way to customize the dropdown caret in a semantic-ui-react component? Here's how it currently appears: https://i.sstatic.net/GpvfC.png <Dropdown className="hello-dropdown" placeholder="Comapany" onChange={th ...

Opera browser encountering issue with styled image overlay in select list

We have implemented images in CSS to customize our select fields and they appear correctly in most browsers, except for Opera where the images are not displaying. To better illustrate the issue, I have set up a JSfiddle. Please try it out in Opera to expe ...

The plugin data containing 'data:application/pdf;base64,JVBERi0xLjQKJ**' was declined for loading. Content security policy cannot be configured

My approach to enforcing content security policy involves using the following code snippet: <meta charset="UTF-8" http-equiv="content-security-policy" content="object-src 'self' data:" /> However, when this i ...

Determine the overall sum of all items

Utilizing data fetched from my SQLite database, I'm utilizing *ngFor to display a comprehensive list of items with their respective names, prices, amounts, and totals. How can I calculate the grand total and display it at the bottom of the list? chec ...

Ways to retrieve a value within a function and update a variable

Fetching data from the firebase database = firebase.database(); var ref = database.ref('urls'); ref.on('value', gotData, errData); function errData(err){ console.log('Error!'); console.log(err); } function gotData(d ...

Wrapping a list vertically with ASP.NET using a repeater for generation

I have a repeater that is creating a list of links in no particular order. I want the list to be displayed as follows: -Item1 -Item4 -Item2 -Item5 -Item3 Most solutions I've found require you to know the items in advance and set specific classes for ...

Ensure that the Footer spans the entire width of the screen by using a container with fluid width, while

What is the best way to ensure that my Footer spans the full width of the browser window? Note: My website uses Bootstrap, with the Footer utilizing 'container-fluid' while the page content utilizes 'container'. Live link: HTML < ...

Mongoose and Node combination causing delays in database queries

While GET and DEL requests work well, I'm having trouble with POST. When I send a string to the database using POST, it doesn't show up on my web app right away. It only appears when I add a second string, almost like there is a delay? app.post ...

The Failure of window.pushState in HTML 5 History

Looking to implement ajax loading for updating center content and URL without refreshing the page. Everything seems to be working fine except for the history management. It appears that window.pushState is not properly recording URLs or the popstate even ...

Ensuring divs are centered when resizing the page

Is there a way to center an unordered list of tables while ensuring that it remains centered even when the window is resized? The list should move each table to a new line if they can no longer fit. Check out the code snippet below for reference: <d ...

What is the technique to enable this div to be clickable?

I am trying to make each "card" of a WordPress plugin clickable on my website. I have inserted a Pure JS element with the following code: document.getElementsByClassName('fc_card-container').onclick = function() {alert('It works!');} ...