Table fixed header and scrollable body
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
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;
}
For a pure CSS approach you'd need a container with overflow-y: auto;
and decide how to hide scrolled/overflown rows:
- Overlay by a non-transparent sticky header (
position: sticky; top: 0; z-index: 1;
), like in the @RokoCBuljan's answer. - Toggle visibility of the rows (by setting
tr:after
properties as per below).
Note that the container can be an external <div>
, or the <table>
itself, or a part of it (e.g. <tbody>
). For the later two you gotta set display: block;
so effectively they're treated as div
s.
See below a modified @giulio's solution:
:root {
--height-height: 150px;
/* cell width has to reserve some space for scrolling. Hence the sum < 100% */
--cell-width: 85px;
}
.header-fixed {
width: 200px;
}
/* Treat all as divs */
.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;
}
/* Prevent header to wrap */
.header-fixed > thead > tr > th {
white-space: nowrap;
background-color: lightgrey;
}
.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
.header-fixed > tbody {
overflow-y: auto;
height: var(--height-height);
}
.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
width: var(--cell-width);
border: thin solid grey;
float: left;
}
<table class="header-fixed">
<thead>
<tr> <th>Header 1</th> <th>Header 2</th> </tr>
</thead>
<tbody>
<tr> <td>cell 11</td> <td>cell 12</td> </tr>
<tr> <td>cell 21</td> <td>cell 22</td> </tr>
<tr> <td>cell 31</td> <td>cell 32</td> </tr>
<tr> <td>cell 41</td> <td>cell 42</td> </tr>
<tr> <td>cell 51</td> <td>cell 52</td> </tr>
<tr> <td>cell 61</td> <td>cell 62</td> </tr>
<tr> <td>cell 71</td> <td>cell 72</td> </tr>
<tr> <td>cell 81</td> <td>cell 82</td> </tr>
<tr> <td>cell 91</td> <td>cell 92</td> </tr>
</tbody>
</table>
Note: If you've got >2 columns, you need to fiddle with the var(--cell-width)
variable accordingly.
Fixed table head - CSS-only
Simply position: sticky; top: 0;
your th
elements. (Chrome, FF, Edge)
.tableFixHead { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
For both sticky vertical TH and horizontal TH columns (inside TBODY
):
.tableFixHead { overflow: auto; height: 100px; width: 240px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }
.tableFixHead { overflow: auto; height: 100px; width: 240px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; white-space: nowrap; }
th { background:#eee; }
<div class="tableFixHead">
<table>
<thead>
<tr><th></th><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><th>Foo</th><td>Some long text lorem ipsum</td><td>Dolor sit amet</td></tr>
<tr><th>Bar</th><td>B1</td><td>B2</td></tr>
<tr><th>Baz</th><td>C1</td><td>C2</td></tr>
<tr><th>Fuz</th><td>D1</td><td>D2</td></tr>
<tr><th>Zup</th><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
TH borders problem fix
Since border
cannot be painted properly on a translated TH
element,
to recreate and render "borders" use the box-shadow
property:
/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
box-shadow: inset 1px 1px #000, 0 1px #000;
}
.tableFixHead { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
box-shadow: inset 1px 1px #000, 0 1px #000;
}
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
TH sticky not working fix
Ensure that parent-elements of "th
" element, at least till table
element (inclusive), do Not set overflow
related styles (e.g. overflow
, overflow-x
, overflow-y
).
For more see stackoverflow.com/Why is 'position: sticky' not working?
Fixed table head - using JS. (IE)
You can use a bit of JS and translateY the th
elements
jQuery example
var $th = $('.tableFixHead').find('thead th')
$('.tableFixHead').on('scroll', function() {
$th.css('transform', 'translateY('+ this.scrollTop +'px)');
});
.tableFixHead { overflow-y: auto; height: 100px; }
/* Just common table stuff. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
Or plain ES6 if you prefer (no jQuery required):
// Fix table head
function tableFixHead (e) {
const el = e.target,
sT = el.scrollTop;
el.querySelectorAll("thead th").forEach(th =>
th.style.transform = `translateY(${sT}px)`
);
}
document.querySelectorAll(".tableFixHead").forEach(el =>
el.addEventListener("scroll", tableFixHead)
);