'bootstrap fixed table headers with scrolling body

New to programming and first time posting here as well.

I've got a bit of an issue with my bootstrap table inside a panel. I have a dropdown menu where the user can decide which columns to display. I need to be able to scroll through the table content both vertically and horizontally as more data gets added. This works fine without the scroll bar as bootstrap solves that for me. When i set my table to "display: block" my scroll bar works fine, but now the column headers don't line up nicely anymore. Also when i add more columns to display, instead of adding to the top header row they create a second row. Here i want it to push the content together but still allowing each column to take up as much space as they need and when the table width exceeds it's limit i want the content to scroll horizontally as well. My problem is that my data changes depending on which data the user selects (Project id, Summary, Description etc.) so i can't set individual column.

Here is my code for the table:

http://pastebin.com/e6qLwYqx

Here is my css for the table:

http://pastebin.com/cFFj6Haw

Would very much appreciate if someone could help me solve this, I have been stuck with this for days.

htmlcssangularjstwitter-bootstrapscroll


Solution 1:[1]

use 

.table{
overflow:scroll ;

}

sometime you can override your bootstrap class by using !important for any update

Solution 2:[2]

Reference from here.

Check this Question for other solution.

Here is the working solution

HTML

<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>

CSS

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 to jsfiddle

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Smoke
Solution 2 Community

Related Questions