bootstrap fixed table headers with scrolling body

Question

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.

"Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**." Don't link to pastebin, put the code here. Preferably in a snippet so the demo is live. — Quentin, Sep 04 '15 at 13:37

score 0 · Answer 1 · answered Sep 04 '15 at 07:17

0

use

.table{
overflow:scroll ;

}

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

answered Sep 04 '15 at 07:17

Smoke

89
1
8
15

score 0 · Answer 2 · edited May 23 '17 at 11:52

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

bootstrap fixed table headers with scrolling body

2 Answers2