Issues persisting with the fixed header functionality in Bootstrap table

I implemented a table using bootstrap-table in my project. Everything seems to be working fine except for the scroll bar within the tbody.

For some reason, the scroll bar is not appearing. Can anyone point out what I might be missing? I believe that if the scroll bar is visible, then the fixed-header feature for the table should also function correctly. 

<table id="tblMain" class="table table-bordered table-hover" data-show-refresh="false" data-click-to-select="false" data-single-select="true" data-show-toggle="false" data-show-columns="false" data-cache="false" data-page-number="@Model.CommonVariable" data-url='@Url.Action("Index", "Home")'  data-side-pagination="server" data-pagination="true" data-search="false" data-query-params="queryParams" data-response-handler="respHandler">
    <thead class="table-head">
        <tr>
            <th data-field="id" data-formatter="SomeFunction">Item ID</th>
            <th data-field="name" data-formatter="SomeFunction2">Item Name</th>
            <th data-field="price" data-formatter="SomeFunction3">Item Price</th>
        </tr>
    </thead>
</table>
csstwitter-bootstrapbootstrap-table

Answer №1

Take a look at this JSFiddle for the solution you need.

Although I did not personally create this, I believe it fits your requirements. 

    table {
        table-layout:fixed;
    }

    .div-table-content {
      height:150px;
      overflow-y:auto;
    }

Answer №2

If you want to enable the fixed-header feature, simply set the data-height option, like this: .

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

Is `html.fa-events-icons-ready` causing clutter and disrupting the layout of the body?

I am seeking some clarification on my code and the resulting issues it is causing. Check out this image for reference: https://i.stack.imgur.com/jBQYd.png Why is the body height not taking up 100% of the space? The background image appears to be affect ...

htmlcsscss-selectorsfont-awesome

Switching the background color of alternating divs in reverse order: a step-by-step guide

I am looking to alternate the background color of divs between odd and even, with the last div being grey and the second to last div being green. I have tried using the odd/even classes in CSS, but it did not work as expected. .main{ width:500px; height ...

javascripthtmlcss

What are alternative ways to divide CSS without relying on CSS-in-JS and CSS modules?

Recently, I transitioned to next.js and I'm eager to develop an application with CSS styles without resorting to css-in-js or inline styling. In my exploration, I've come across two potential options: using CSS modules or importing global styles ...

cssnext.js

Maintain the central alignment of the entire page (including the horizontal scrollbar) while zooming in

I have successfully centered elements, but now I am trying to center the entire page (i.e. have the horizontal scrollbar in the middle) when zooming in. Currently, the scrollbar stays at the very left end as I zoom in. * { margin: 0; padding: 0; box ...

css

Looking for a way to prevent a div element from scrolling in JQuery Mobile?

Here is my implementation: http://jsfiddle.net/coderslay/Lhb5Y/ I have content structured like this: <div data-role="content"> <div><!--Contains a button --></div> <div><ul>..<!--Contains a list -->...</ ...

jqueryhtmlcssjquery-mobile

Is it permissible to use DEFER or ASYNC when including a stylesheet?

I am curious if script files are able to utilize the DEFER and ASYNC keywords on a resource include. Are these keywords also compatible with stylesheet (CSS) includes? The syntax I imagine would be: <link rel="stylesheet" type="text/css" href="./path/ ...

htmlcssasynchronousdeferred-loading

When viewing a page in IE 9 within a frame, not all CSS styles are properly rendered, causing it to enter Quirks mode

When a web page is loaded within a frame, not all of its styles are applied. The specific stylesheet used for the div elements is as follows: div.super{ position:absolute; font-family: Helvetica; font-size: 0.75em; padding:4px; overflo ...

cssinternet-explorer-9framesquirks-mode

The problem with floating labels

I have been attempting to incorporate the floatlabels feature from floatlabels, but I am encountering difficulties in getting it to work properly. Here is the sequence of steps I have taken: Firstly, I include the JS file <script src="js/floatlabels. ...

jqueryhtmlcssforms

Adjust the position of the div so that it remains visible as you scroll

Is it possible to position an element within a container that contains a wide table with overflow property so that the element remains visible while scrolling horizontally through the table data? <div id = "mainContainer" style = "width:300px; overflow ...

jquerycss

Is it possible to use columns in the Bootstrap 4 grid system to create text that wraps around an image?

I have been searching for a solution all day without success. Can anyone help me figure out how to wrap text around an image using d-flex or flex-wrap in Bootstrap 4's grid layout with columns and rows? Below, I have shared my code and included two im ...

cssflexboxgridbootstrap-4word-wrap

Enhance your web design with the mesmerizing jQuery UI drop effect combined

I'm attempting to create an animated toggle effect on a box using jQuery UI's drop feature. However, I've encountered some trouble due to the box having box-sizing: border-box applied which is causing issues with the animation. During the a ...

jqueryjquery-uicss

Using null or undefined for ternary operator formatting in React applications

When styling a component, what should be used if a specific condition is not fulfilled: null, undefined, or something else? For example: errorStyle: { right: locale === Locales.ARABIC ? 0 : null, left: locale !== Locales.ARABIC ? 0 : null, .. ...

javascriptcssreact-native

Saving a picture to local storage with the file input type in ReactJS

I am attempting to save an image in the browser storage once a user selects an image from their computer. <div className="add_grp_image_div margin_bottom"> <img src={img_upload} className="add_grp_image"/> <input type="file" class ...

javascripthtmlcssreactjs

Instructions on how to load an HTTP file inside a Bootstrap modal

Is it possible to load a file located at an http:// address into a modal window? Something like this: <a class="btn btn-info btn-large" data-toggle="modal" href="#http://localhost/login.html"> <i class="icon-user icon-white"></i> Login ...

csstwitter-bootstrap

Can you guide me on where to find the login with Facebook button on this site?

I am currently working on integrating a Facebook authentication system into my app, but I find the default log in button provided by Facebook developers section to be quite unappealing. My Question: I am curious about how websites like Stack Overflow man ...

cssfacebook

Ways to ensure that the height of the second row in the second column matches that of the first column

My current layout design is causing an issue where the lower green box extends beyond the total height of the entire box. I've provided a rough version of my code on codepen. Using the Bulma framework, my goal is to align the height of the left column ...

javascripthtmlcssbulma

Struggling with aligning rows containing three divs each in Rails and bootstrap

Looking to display 3 article divs in each row on my website using bootstrap 3 grid system: <div class="container-fluid"> <h1>NEWS</h1> <div class="row"> <% @articles.each do |article| %> <div class="col- ...

htmlcssruby-on-railstwitter-bootstrap

Is there a way to replace my website's link colors using classes?

Struggling to change the default link colors on my site. Despite researching similar issues, I can't seem to make it work. This is how I've set the base link colors: a:link, a:visited, a:hover { color: #0279aa } Below is my style override for ...

htmlcss

JavaScript and Responsive Design Techniques

I'm struggling to create a responsive page that starts with a mobile-first approach, but I keep running into the same issue. When I have my dropdown menu in the mobile version, it looks good. However, when I try to switch it to the non-mobile version ...

javascripthtmlcss

Struggling with adding a border to an HTML table?

I am attempting to create a table with alternating borders on the cells. After trying the code below, I still can't seem to get the desired effect. The borders are not showing up at all. Can someone provide guidance on how to achieve this? <style ...

htmlcsshtml-table