Incorporate a vertical scrollbar in the tbody while keeping the thead fixed for smooth vertical scrolling

I'm seeking a solution to implement horizontal and vertical scroll for my table.

Currently, the horizontal scroll is working fine, but when trying to add vertical scroll, the table header also moves along with it. Is there a way to keep the table header fixed only when scrolling vertically?

.table-responsive {
    max-height:200px;
    overflow-x: auto !important;
    overflow-y: auto !important;
}
<div class="table-responsive table-striped">
    <div id="tblLocationInfo_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">       
        <table id="tblLocationInfo" class="table table-hover dataTable" role="grid" style="width: 2400px;">
            <thead>
                <tr role="row"></tr>
                <tr role="row"></tr>
                <tr role="row"></tr>
                <tr role="row"></tr>
                <tr role="row"></tr>
                <tr role="row"></tr>
                <tr role="row"></tr>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="tblLocationInfo" rowspan="1" colspan="1" aria-label="TaskType: activate to sort column ascending" style="width: 762px;">TaskType</th>
                    <th class="sorting" tabindex="0" aria-controls="tblLocationInfo" rowspan="1" colspan="1" aria-label="FromDate: activate to sort column ascending" style="width: 762px;">FromDate</th>
                    <th class="sorting" tabindex="0" aria-controls="tblLocationInfo" rowspan="1" colspan="1" aria-label="ToDate: activate to sort column ascending" style="width: 762px;">ToDate</th>
                </tr>
            </thead>
            <tfoot>
                <tr></tr>
                <tr></tr>
                <tr></tr>
                <tr></tr>
                <tr></tr>
                <tr></tr>
                <tr></tr>
                <tr>
                    <th rowspan="1" colspan="1"><input name="Inventory" data-index="0" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                    <th rowspan="1" colspan="1"><input name="FromDate" data-index="1" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                    <th rowspan="1" colspan="1"><input name="ToDate" data-index="2" class="form-control js-footer-search" type="text" placeholder="Search"></th>
                </tr>
            </tfoot>
            <tbody>
                <tr role="row" class="odd">
                    <td>Main Location</td>
                    <td>02 Jul 2018 11:11:50:023</td>
                    <td>02 Jul 2018 11:54:13:760</td>
                </tr>
                <tr role="row" class="even">
                    <td>Main Location</td>
                    <td>02 Jul 2018 11:12:20:710</td>
                    <td>02 Jul 2018 12:13:13:867</td>
                </tr>
                <tr role="row" class="odd">
                    <td>Main Location</td>
                    <td>02 Jul 2018 11:13:22:083</td>
                    <td>02 Jul 2018 12:20:28:553</td>
                </tr>
                <tr role="row" class="even">
                    <td>InventoryLine</td>
                    <td>02 Jul 2018 11:50:56:527</td>
                    <td>02 Jul 2018 11:57:10:043</td>
                </tr>
                <tr role="row" class="odd">
                    <td>Main Location</td>
                    <td>02 Jul 2018 11:27:16:760</td>
                    <td>02 Jul 2018 12:27:40:277</td>
                </tr>
                <tr role="row" class="even">
                    <td>Main Location</td>
                    <td>02 Jul 2018 11:55:31:263</td>
                    <td>02 Jul 2018 12:33:09:467</td>
                </tr>
                <tr role="row" class="odd">
                    <td>InventoryLine</td>
                    <td>02 Jul 2018 12:14:14:043</td>
                    <td>02 Jul 2018 12:37:39:203</td>
                </tr>
                <tr role="row" class="even">
                    <td>Main Location</td>
                    <td>02 Jul 2018 12:23:47:223</td>
                    <td>02 Jul 2018 12:56:50:997</td>
                </tr>
                <tr role="row" class="odd">
                    <td>Main Location</td>
                    <td>02 Jul 2018 12:24:17:920</td>
                    <td>02 Jul 2018 13:06:17:873</td>
                </tr>
                <tr role="row" class="even">
                    <td>InventoryLine</td>
                    <td>02 Jul 2018 12:36:34:623</td>
                    <td>02 Jul 2018 13:23:59:467</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

For further reference, here is the link to the solution on https://jsfiddle.net/ksyfwn5m/2/

javascriptjqueryhtmlcssscrollbar

Answer №1

Consider applying the fixed property to your th element for optimal results

HTML:

<thead id="header-fixed"></thead>

CSS:

#header-fixed {
    position: fixed;

}

Answer №2

When utilizing the dataTable, it comes with a built-in feature for fixing headers that can solve your issue.

$('#example').DataTable( { fixedHeader: true } );

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

Filter Form Inputs using JQuery by Class and Value

I am currently utilizing AJAX to submit form values and I require the ability to extract values based on class rather than id. The form from which I am gathering information will be utilized multiple times within the web application. With a blend of Framew ...

jqueryajaxcordovainputhtml-framework-7

Elevating the Sidebar: Transforming Bootstrap 4 Sidebar into a Top

Recently, I delved into the topic of creating a responsive sidebar menu in Bootstrap 4. After exploring various solutions, I opted for an alternate version. Here's the HTML code snippet that I implemented: <div class="container-fluid"> < ...

htmlcsstwitter-bootstrapsidebar

How can I manage the asynchronicity of Hapi.js, fs.readFile, fs.writeFile, and childProcess.exec?

My code execution seems to be resulting in an empty list, could it be that my asynchronous calls are incorrect? I've tried rearranging and breaking things into functions but there still seems to be a timing issue with my execution. The order in which ...

javascriptnode.jsasynchronoushapi.js

Encountering ExpressionChangedAfterItHasBeenCheckedError during ngOnInit when utilizing Promise

I have a simple goal that I am working on: I want to display data obtained from a service in my component. This is how it used to work: In my component: ... dataSet: String[]; ngOnInit(){ this._service.getDataId().then(data => this.dataSet = da ...

javascriptangulartypescriptpromise

every cell should be painted a distinct hue

I need to create a 10x10 array in JavaScript and fill each cell in the 2D array with different colors using canvas. I have managed to do this part, but now I am stuck on how to check if each cell has a different color from its neighbors. Any suggestions ...

javascripthtmlcanvas

A guide on conditionally rendering components in React

When I try to add a nested if statement in JSX, condition ? true example : false example works perfectly. However, when I change it to if(condition) { ... }, it displays an error in the console: https://i.stack.imgur.com/TIBRo.jpg Example with one-line c ...

javascriptreactjsjsx

Using Typescript with Angular 2 to Implement Google Sign-In on Websites

Currently, I am in the process of creating a website that utilizes a typical RESTful web service to manage persistence and intricate business logic. To consume this service, I am using Angular 2 with components coded in TypeScript. Instead of developing m ...

javascripttypescriptangulargoogle-signin

Monitoring and recording user's browsing activities while excluding server-side scripting

Currently, I am working on creating a registration form which will direct users to a "Thank you" page once completed. However, I want to include a button on this confirmation page that will take users back to the previous page they were on before registeri ...

javascriptformsbrowser-history

Is it possible to construct an IFrame using URL parameters?

Looking to implement an iframe that displays a page provided as a parameter in the URL using ASP.NET MVC4. Here's the approach I have in mind: Updated the code but it still doesn't seem right to me. <?php if(!isset($_GET['link'] ...

phphtmlasp.net-mvc-4

Is it possible for me to listen to an AngularJS event using regular JavaScript, outside of the Angular framework?

Is it possible to listen to an event triggered in AngularJS using regular JS (outside of Angular)? I have a scenario where an event is being emitted using RxJS in Angular 2. Can I observe that event from pure JS? Here's some example pseudo code: imp ...

javascriptangulartypescriptrxjsdom-events

Running a Python script using Node.js

I'm having trouble running a machine learning script from my node.js application using the child-process core module as described here However, I am unable to receive any output from script.stdout.on. The versions I am using are Node v12.5.0 and pyt ...

javascriptpythonnode.js

Creating JavaScript functions that accept three inputs and perform an operation on them

Apologies in advance if there are any silly mistakes as I am new to Javascript. I want to add "salary", "pension", and "other" together, then display the result in an input field when a button is clicked. Not sure if I have used the correct tags in my cod ...

javascripthtml

Developing a Form Submission Feature Using JQuery Mobile

I'm having trouble submitting a form using JQuery Mobile. Currently, my code looks like this: <form action="#pagetwo" method="post" name="myform"> <input type="text" name="myname"> <input type="submit" value="submit" /> ... and th ...

javascripthtmljquery-mobile

What about nested elements with percentages, set positions, and fixed placements?

Picture: https://i.sstatic.net/KFNR1.png I am working on a design with a yellow container div that I want to keep at 50% width of the window. Inside this container is a purple image div that stretches to 100% of the parent container's width, and ther ...

javascripthtmlcssfrontend

How come certain invisible screen elements suddenly become visible when the document is printed?

When creating a play-off tournament bracket, I face the challenge of adjusting for varying numbers of participants in each round. Typically, there are 2^n participants in each tour: 16, 8, 4, 2 which can be easily accommodated in a flex column layout. Howe ...

htmlcssprintingmaterial-ui

dividing an HTML string into individual variables using JavaScript

How can a string be split in pure JavaScript (without using JQuery/dojo/etc) in the most efficient and straightforward way? For example: var tempString = '<span id="35287845" class="smallIcon" title="time clock" style="color:blue;font-size:14px;" ...

javascripthtml

The ng-change functionality of Angular radio buttons only functions correctly the first time it

I am struggling to comprehend why the angular ng-change function is only being called on the first click. Take a look at this example: http://jsfiddle.net/ZPcSe/5/ The function in the provided example is triggered every time the radio selection is change ...

javascriptangularjs

Creating a Dynamic Landing Page with Node.js and Express

Recently, I purchased an HTML landing page and am a complete novice in this area... Upon inspection, I noticed there are three distinct folders: /windows /ios /android I'm interested in utilizing nodejs and express to showcase the landing page. Spec ...

htmlnode.jsexpresstwitter-bootstrap-3

Tips for splitting the json_encode output in Javascript

Looking for help with extracting specific values from JSON data retrieved via PHP and AJAX. I only want to display the agent name in my ID, not the entire object that includes "name" : "Testing". Here is the console output: [{"agent_module_id":"1","agen ...

javascriptphpjqueryajax

There appears to be an issue with the function's ability to

I'm currently facing an issue with my script. There's an editable field and a button next to it, and I've created a function that should start working when the button is pressed, reading data from the input field. However, the function doesn ...

javascriptcontenteditable