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
You should try with "display:block;" to tbody, because now it's inline-block and in order to set height, the element should be "block"
Multiple scrollable table support in a single window.
Pure CSS & No fixed or sticky.
I am searching fixed table header with auto "td" and "th" width for years. Finally i coded something, it's work well for me but i am not sure is it work well for everyone.
Problem 1: We can't set table or tbody height while have tons of "tr" it's because of default table properties.
Solution: Set table a display property.
Problem 2: When we set a display property, the width of "td" elements can't be equal width of "th" elements. And it is hard to fill elements properly in full width table like 100%.
Solution: CSS "flex" is very good solution for width and fill set-ups, so we will build our tbody and thead elements with CSS "flex".
.ea_table {
border: 1px solid #ffffd;
display: block;
background: #fff;
overflow-y: hidden;
box-sizing: border-box;
float: left;
height:auto;
width: 100%;
}
.ea_table tbody, thead {
flex-direction: column;
display: flex;
}
.ea_table tbody {
height: 300px;
overflow: auto;
}
.ea_table thead {
border-bottom: 1px solid #ffffd;
}
.ea_table tr {
display: flex;
}
.ea_table tbody tr:nth-child(2n+1) {
background: #f8f8f8;
}
.ea_table td, .ea_table th {
text-align: left;
font-size: 0.75rem;
padding: 1.5rem;
flex: 1;
}
<table class="ea_table">
<thead>
<tr>
<th>Something Long</th>
<th>Something </th>
<th>Something Very Long</th>
<th>Something Long</th>
<th>Some</th>
</tr>
</thead>
<tbody>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem </td>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
</tbody>
</table>
jsfiddle
Here is my copen pen on how to make fixed table header with scrollable rows and columns. The columns are also been fixed width, http://codepen.io/abhilashn/pen/GraJyp
<!-- Listing table -->
<div class="row">
<div class="col-sm-12">
<div class="cust-table-cont">
<div class="table-responsive">
<table border="0" class="table cust-table">
<thead>
<tr style="">
<th style="width:80px;">#</th>
<th style="width:150px;" class="text-center"><li class="fa fa-gear"></li></th>
<th style="width:250px;">Title</th>
<th style="width:200px;">Company</th>
<th style="width:100px;">Priority</th>
<th style="width:120px;">Type</th>
<th style="width:150px;">Assigned to</th>
<th style="width:120px;">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th style="width:80px;">1</th>
<td style="width:150px;" class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td style="width:250px;">Lorem ipsum dolor sit</td>
<td style="width:200px;">lorem ispusm</td>
<td style="width:100px;">high</td>
<td style="width:120px;">lorem ipsum</td>
<td style="width:150px;">lorem ipsum</td>
<td style="width:120px;">lorem ipsum</td>
</tr>
<tr>
<th scope="row">2</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">4</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">5</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">6</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">7</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">8</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">9</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">10</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">11</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">12</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
</tbody>
</table>
</div>
</div> <!-- End of cust-table-cont block -->
</div>
</div> <!-- ENd of row -->
.cust-table-cont { width:100%; overflow-x:auto; }
.cust-table-cont .table-responsive { width:1190px; }
.cust-table { table-layout:fixed; }
.cust-table thead, .cust-table tbody {
display: block;
}
.cust-table tbody { max-height:620px; overflow-y:auto; }
Likely you'll get multiple tables on one page, therefore you need CSS classes. Please find a modified @giulio's solution for that.
Just declare it in table:
<table class="table table-striped header-fixed"></table>
CSS
.header-fixed {
width: 100%
}
.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
display: block;
}
.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
.header-fixed > tbody {
overflow-y: auto;
height: 150px;
}
.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
width: 20%;
float: left;
}
Be aware that current implementation suits five columns only. If you need a different number, change the width parameter from 20% to *100% / number_of_columns*.
Update
For newer and still maintained library try jquery.floatThead (as mentioned by Bob Jordan in the comment) instead.
Old Answer
This is a very old answer, the library mentioned below no longer maintained.
I am using StickyTableHeaders on GitHub and it works like charm!
I had to add this css to make the header not transparent though.
table#stickyHeader thead {
border-top: none;
border-bottom: none;
background-color: #FFF;
}
It is easier with css
table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }