Skip to content
Fix Code Error

Table fixed header and scrollable body

March 13, 2021 by Code Error
Posted By: Anonymous

I am trying to make a table with fixed header and a scrollable content using the bootstrap 3 table.
Unfortunately the solutions I have found does not work with bootstrap or mess up the style.

Here there is a simple bootstrap table, but for some reason to me unknown the height of the tbody is not 10px.

height: 10px !important; overflow: scroll;

Example:

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody style="height: 10px !important; overflow: scroll; ">
    <tr>
        <td class="filterable-cell">111 Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>
    
</table>

Solution

Here is the working solution:

table {
    width: 100%;
}

thead, tbody, tr, td, th { display: block; }

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;

    /*text-align: left;*/
}

tbody {
    height: 120px;
    overflow-y: auto;
}

thead {
    /* fallback */
}


tbody td, thead th {
    width: 19.2%;
    float: left;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Make</th>
            <th>Model</th>
            <th>Color</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
    </tbody>
</table>

Link to jsfiddle

Answered By: Anonymous

Related Articles

  • Navbar not filling width of page when reduced to mobile view
  • Web colors in an Android color xml resource file
  • How to use html template with vue.js
  • Can't install via pip because of egg_info error
  • Is CSS Turing complete?
  • After a little scroll, the sticky navbar just is not…
  • SQL query return data from multiple tables
  • Jquery fadeToggle Trouble
  • Polymer paper-dialog: how can I know when an…
  • How to convert image into byte array and byte array…
  • Having trouble with my nav bar/header, It used to…
  • Active tab issue on page load HTML
  • Is it possible to apply CSS to half of a character?
  • HTML table with 100% width, with vertical scroll…
  • How to prevent scrolling the whole page?
  • Unresponsive hamburger icon in HTML
  • insert tables in dataframe with years from 2000 to…
  • Jetty: HTTP ERROR: 503/ Service Unavailable
  • In Pandas, how do I convert a number column to…
  • Sort table rows In Bootstrap
  • Use of Jquery on scroll event
  • Daisy is overlapping the other contents of the div
  • Adobe XD to responsive html
  • How do I include certain conditions in SQL Count
  • python 3.2 UnicodeEncodeError: 'charmap' codec can't…
  • How do I keep only the first map and when the game…
  • Why can I ping a server but not connect via SSH?
  • GLYPHICONS - bootstrap icon font hex value
  • How do i update a javascript variable as its value changes?
  • Azure Sql : Unable to Replace HTML String
  • SQL find sum of entries by date including previous date
  • Safe truncate string contains color tag
  • Why does writeObject throw…
  • Data structure for maintaining tabular data in memory?
  • How to change the color of paper-scroll-header-panel?
  • Scrollable Menu with Bootstrap - Menu expanding its…
  • Fix top buttons on scroll of list below
  • React Native using conditional rendering still…
  • Programmatically select a row in JTable
  • How to modify pre_close in batches
  • JavaScript Code not running on a Live Sever nor Local Host
  • How to stretch the div to all the height of the page?
  • paper-dialog stretching off screen
  • Java web start - Unable to load resource
  • Managing longs and short orders like LucF PineCoders…
  • How to convert daily data into weekly data in batches
  • How to show title in hover - css / jquery
  • polymer 1.0 dom-repeat filter only runs once
  • Simple Popup by using Angular JS
  • Change background color on mouseover and remove it…
  • How to group an array of objects by key
  • Select DataFrame rows between two dates
  • Centering in CSS Grid
  • How can I fix this Blazor/Bootstrap 5 CSS issue with…
  • My DIV elements go diagonal instead of horizontal
  • Trying to keep dropdown menus flush to the edge of…
  • Best way to extract messy HTML tables using BeautifulSoup
  • Why my "title" bloc doesn't go to bottom?
  • Pandas pivot_table: filter on aggregate function
  • How can I adjust the color of a fixed element to its…
  • Bootstrap 4.6 + CSS, how to bottom align a row
  • Java string to date conversion
  • Onclick event not happening when slick slider is…
  • how to access parent component scope from a child…
  • Link color is not changing after adding a class with jQuery
  • Basic Ember Template Not Rendering in Rails
  • boostrap modal not updating with vue js v2 two way binding
  • Python sort_values (inplace=True) but not really?
  • How to use if else if in button - flutter
  • React Multi-level push menu SCSS Back button not working
  • polymer paper-scroll-header-panel doesn't display
  • 2 foreach in 1 table is not work correctly
  • Content is not allowed in Prolog SAXParserException
  • Django - update inline formset not updating
  • Generic function parameter with unknown args
  • How to add "new" element/objects s to a list in javascript?
  • How do I do a drag and drop using jQuery to move…
  • Bootstrap-Table: Using Ajax call and add link to…
  • Bootstrap - center child when parent isn't centered…
  • When tab is selected, show next tab.. if last tab…
  • Lua: Obtaining number of quarters and day of quarter
  • Twitter Bootstrap tabs not working: when I click on…
  • Scroll part of content in fixed position container
  • CSS Input with width: 100% goes outside parent's bound
  • "PKIX path building failed" and "unable to find…
  • Using Auto Layout in UITableView for dynamic cell…
  • Why does I can't add background image even I use static
  • How to set tbody height with overflow scroll
  • CSS DIV width based on text length with position…
  • I need to sum values with specific condition
  • Incorporate JQuery-file-upload to application
  • sql query to find priority jobs
  • Scripting Required for Polymer Submenu/Pages Navigation?
  • Pentaho Data Integration SQL connection
  • setTimeout function not working : javascript
  • VueJS masonry layout
  • Is there any function in Vue to check if the DOM…
  • Getting checkbox values on submit
  • Calculating a number from items in an array then…
  • Checkbox Validation Without Arrow Functions using Svelte

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Python Pandas Error tokenizing data

Next Post:

Get list of databases from SQL Server

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error