Clash Royale CLAN TAG

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.

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

<thead>

<tbody>

2 Answers
2

use

.table{
overflow:scroll ;

}


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

!important

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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.