bootstrap class applied to create a fixed header in an HTML table

Currently, I am working on a HTML table with Bootstrap styling and attempting to create a fixed-header table using the example provided in this sample. However, I am facing an issue where the columns are misaligned between the header and body of the table.

I have made attempts with the following code snippet:

$fixedColumn.find('thead').find('tr:first').find('th').each(function (i, elem) {
    var w = $table.find('tbody').find('tr:first').find('td:eq(' + i + ')').width();
     $(this).css({width: w});  
});

Unfortunately, this has not resolved the issue. Can anyone suggest how I can correctly set the width of the columns to match the fixed header columns?

jquerycsstwitter-bootstraphtml-tablefixed-header-tables

Answer №1

Is this what you're looking for? http://jsfiddle.net/swm53ran/139/ (using only bootstrap, no plugins)

I structured the layout with two tables - one for the header and one for the body. CSS was applied to the div surrounding the body to create overflow, along with minor styling adjustments to ensure the header borders align properly. I hope this solution is helpful for your needs!

<div class="col-xs-12" style="padding-right:21px;">
    <table class="table table-bordered" style="margin-bottom:0px;">
        <thead>
            <tr>
                <th>Top Header</th>
                <th>Top Header</th>
                <th>Top Header</th>
                <th>Top Header</th>
            </tr>
        </thead>
    </table>
</div>
<div class="col-xs-12 scroll">
    <table class="table table-bordered" >
        <tbody>
            <tr>
                <td>Normal Cell</td>
                <td>Normal Cell</td>
                <td>Normal Cell</td>
                <td>Normal Cell</td>
            </tr>
            <tr>
                <td>Normal Cell</td>
                <td>Normal Cell</td>
                <td>Normal Cell</td>
                <td>Normal Cell</td>
            </tr>
        </tbody>
    </table>
</div>

.scroll {
    height:100px;
    overflow-y: auto;
    padding-right:0px;
}

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

The script in Rails using jQuery fails to function properly upon clicking a link

I came across a jquery script that ensures all divs have equal heights by using window.load and window.resize to trigger the function. It works perfectly when loading the page or resizing, but if I navigate to the page through a link on the site, the div ...

jqueryruby-on-rails

Encountering an unexpected token error while attempting to incorporate JQuery into a React JS project

I am currently diving into the world of React.js and attempting to incorporate a side navigation bar on my homepage. However, I encountered an eslint error when trying to implement the sidebar using jQuery code. Below you will find the code snippet for the ...

javascripthtmljquerycssreactjs

Maintaining the relative position of an SVG while scaling within a div element

I am in the process of incorporating my custom SVG knob icons into an electron application using flexbox. The challenge lies in keeping them centered within the rectangle icon regardless of browser size, as shown here. Ideally, the icons should adjust thei ...

htmlcsssvgelectronscaling

Is the content within the h3 tag invisible on Internet Explorer 8?

The text within the h3 tag displays correctly in Firefox and Chrome, but is not visible in IE8. I'm unsure of what the issue might be. Here is the HTML code: HTML: <div id="right"> <h3> profile <div id='upload' cla ...

htmlcssinternet-explorer-8

Initiating an AJAX request to communicate with a Node.js server

Recently, I started exploring NodeJS and decided to utilize the npm spotcrime package for retrieving crime data based on user input location through an ajax call triggered by a button click. The npm documentation provides the following code snippet for usi ...

javascriptjquerynode.jsajaxexpress

Animating and resizing a div following the addition of HTML content

As someone who is fairly new to jQuery, AJAX, and web development as a whole, this particular issue has been keeping me on edge. The AJAX request that I have implemented successfully pulls in content from another page into the current one. Now, my challen ...

phpjavascriptjqueryajax

Generating a text input field dynamically and connecting it to various data models

I am currently developing an application using AngularJS where I have the requirement to dynamically create textboxes with buttons. Here is an example of how I achieve this: <div class="col-sm-4 type7" style="font-size:14px;"> <div style="mar ...

javascriptjqueryangularjs

Is there a way to extract and store an image from a webpage using selenium, beautifulsoup, and Python 3?

Currently, my main goal is to extract and save a single image from a website post logging in. After examining the image, I discovered that it has a full xpath of /html/body/form/main/div/section/div[1]/div/div[2]/div/img. My plan is to utilize beautiful so ...

htmlcssselenium-webdriverbeautifulsouptesseract

Challenges with enigmatic ajax json requests in jQuery

I am trying to retrieve an rss feed in json format using a Google API with my jQuery code. I have added some alerts, but they do not seem to be displaying when I run the page. What could be causing this issue? Here is the snippet of my jQuery code: funct ...

javascriptjqueryajaxjsonrss

Avoid adding any empty entries to the list using jQuery

I have implemented a code to prevent any blank entries from being added to my list, and it seems to be working fine. However, I can't shake the feeling that there might be a better way to achieve this. Even though it functions correctly, it doesn&apos ...

javascriptjquery

What is the best way to center a heading element within a section on a webpage?

I need assistance aligning the h1 element with the specific class wish to the center of its section, both horizontally and vertically. Unfortunately, I have been unable to achieve this thus far. Any guidance would be greatly appreciated. Below you will fi ...

javascripthtmlcss

Is it possible to hide Form elements and remove their values simultaneously?

I have implemented a script to display an additional language menu, which functions perfectly. However, I encountered an issue where if the user selects a language and then decides to remove it by clicking on "Remove", the field is hidden but the value sti ...

javascriptjqueryajax

Using Promise.map inside another Promise.map

Attempting to return a JSON object via Bluebird's Promise.mapSeries/Promise.map nested within another Promise.mapSeries/Promise.map is proving difficult. Below is the code snippet for the function: function getMovieDetails(link){ return new Promise(f ...

javascriptjquerynode.jspromisebluebird

Concealed delete option in Dropzone.js obscured by popup notification

Utilizing Dropzone.js has enhanced my upload form with file drag and drop capabilities, resulting in a visually appealing and functional interface. However, I have encountered an issue where if a file is rejected due to size or extension restrictions, the ...

jquerydropzone.js

Methods for decoding a JSON object and iterating through its contents

After learning how to encode an object on the server side from this post, I am now interested in decoding it on the client side. Following is what I do on the client side: $.ajax({ type: "GET", url: "/cgi-bin/ajax_sort.pl", contentType: "appl ...

javascriptjqueryajaxjson

Issue with jQuery.off when using a dynamic function name

I am currently implementing a modular pattern for writing my JavaScript code and it has been an enjoyable experience! However, I have encountered a challenging situation. My Namespace structure looks like this: var settings, handlers, objects, Namespace ...

javascriptjquery

Instructions on extracting a random element from an array and continue removing elements from the array until it is completely empty

I am attempting to utilize either jquery or javascript to remove a random item from an array until it is empty. Each time I remove an item, I want to log it to the console. My goal is to create elements with random images from the specified array until all ...

javascriptjqueryarraysfor-loop

Take a break in between keyframe animations

I have a basic animation set up with keyframes. @-webkit-keyframes rotation { 0% { -webkit-transform: rotate(10deg); } 25% { -webkit-transform: rotate(5deg); } 50% { -webkit-transform: rotate(10deg); } 75% { -webkit-transform: ...

animationcss

Utilizing a drop-down selection menu and a designated container to store chosen preferences

My form includes a select dropdown that displays available options (populated from a PHP database). Users can choose options from the list, which are then added to a box below to show all selected items. However, I am facing a challenge with the multiple s ...

javascriptjqueryhtmlcss

Learn the step-by-step process of loading images from posts onto the Smooth Div Scroll slider

Looking to integrate the 'Smooth Div Scroll' Slider into my custom Wordpress theme, specifically pulling images dynamically from a category of posts. You can view my website Diario Metropolis I am currently using the "simple slider" with parame ...

phpjquerywordpresspluginstimthumb