user3663854
Reputation: 463
Fixed table header with responsive table not working
I'm trying to fix my table header once it is scrolled down that it fixed at the top position.
I've managed to fix the header by making a javascript to detect the scroll position and then apply css to make the position as fixed at the top
But the column sizing of the header become lost, apparently it become smaller.
I will appreciate if someone able to help on this?
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
.scroll{
position: fixed;
top: 0 !important;
}
#myDIV{
background-color: #ccc;
}
header{
height: 100px;
}
footer{
height: 2000px;
}
</style>
</header>
<body>
<table style="width:1900px" >
<thead id="myDIV">
<tr>
<th style="width:25%" >Column1</th>
<th style="width:25%" >Column2</th>
<th style="width:25%" >Column3</th>
<th style="width:25%" >Column4</th>
</tr>
</thead>
<tbody >
<tr>
<td style="width:25%" >aaaaaaaaaaa</td>
<td style="width:25%" >bbbbbbbbbbb</td>
<td style="width:25%" >ccccccccccc</td>
<td style="width:25%">ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
</tbody>
</table>
<p id="demo" style="background-color:yellow">testest</p>
</body>
<script>
window.onload = function(){
document.addEventListener("scroll", myFunction);
var i = 0;
function myFunction() {
document.getElementById("demo").innerHTML = "You scrolled in div." + i++;
var lastScroll = document.getScroll();
if(lastScroll[1] >= 100){
document.getElementById("myDIV").classList.add('scroll');
} else {
document.getElementById("myDIV").classList.remove('scroll');
}
}
document.getScroll = function() {
if (window.pageYOffset != undefined) {
return [pageXOffset, pageYOffset];
} else {
var sx, sy, d = document,
r = d.documentElement,
b = d.body;
sx = r.scrollLeft || b.scrollLeft || 0;
sy = r.scrollTop || b.scrollTop || 0;
return [sx, sy];
}
window.onload = function() {
document.addEventListener("scroll", myFunction);
var i = 0;
function myFunction() {
document.getElementById("demo").innerHTML = "You scrolled in div." + i++;
var lastScroll = document.getScroll();
if (lastScroll[1] >= 100) {
document.getElementById("myDIV").classList.add('scroll');
} else {
document.getElementById("myDIV").classList.remove('scroll');
}
}
document.getScroll = function() {
if (window.pageYOffset != undefined) {
return [pageXOffset, pageYOffset];
} else {
var sx, sy, d = document,
r = d.documentElement,
b = d.body;
sx = r.scrollLeft || b.scrollLeft || 0;
sy = r.scrollTop || b.scrollTop || 0;
return [sx, sy];
}
}
}.scroll {
position: fixed;
top: 0 !important;
}
#myDIV {
background-color: #ccc;
}
header {
height: 100px;
}
footer {
height: 2000px;
}<html>
<header>
</header>
<body>
<table style="width:1900px">
<thead id="myDIV">
<tr>
<th style="width:25%">Column1</th>
<th style="width:25%">Column2</th>
<th style="width:25%">Column3</th>
<th style="width:25%">Column4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:25%">aaaaaaaaaaa</td>
<td style="width:25%">bbbbbbbbbbb</td>
<td style="width:25%">ccccccccccc</td>
<td style="width:25%">ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
</tbody>
</table>
<p id="demo" style="background-color:yellow">testest</p>
</body>
<footer></footer>Upvotes: 5
Views: 4754
Answers (3)
Sehjad
Reputation: 81
#myDIV{
background: #ddd;
}
#myDIV th{
text-align: left;
}
tbody {
display:block;
height:100px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}<html>
<header>
</header>
<body>
<table style="width:1900px">
<thead id="myDIV">
<tr>
<th style="width:25%">Column1</th>
<th style="width:25%">Column2</th>
<th style="width:25%">Column3</th>
<th style="width:25%">Column4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:25%">aaaaaaaaaaa</td>
<td style="width:25%">bbbbbbbbbbb</td>
<td style="width:25%">ccccccccccc</td>
<td style="width:25%">ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td style="width:25%">aaaaaaaaaaa</td>
<td style="width:25%">bbbbbbbbbbb</td>
<td style="width:25%">ccccccccccc</td>
<td style="width:25%">ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
</tbody>
</table>
<p id="demo" style="background-color:yellow">testest</p>
</body>
<footer></footer>Upvotes: 1
Md. Abu Sayed
Reputation: 2486
If your not needed old browser you can use position: sticky. sticky is the powerful property in CSS-3 learn about position sticky link for sticky
If you need old browser support you can use jquery sticky table header cross browser
table thead,
table thead th {
position: sticky;
top: 0;
background: #ccc;
}
header {
height: 100px;
}
footer {
height: 2000px;
}<html>
<header>
</header>
<body>
<table style="width:1900px">
<thead>
<tr>
<th style="width:25%">Column1</th>
<th style="width:25%">Column2</th>
<th style="width:25%">Column3</th>
<th style="width:25%">Column4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:25%">aaaaaaaaaaa</td>
<td style="width:25%">bbbbbbbbbbb</td>
<td style="width:25%">ccccccccccc</td>
<td style="width:25%">ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
</tbody>
</table>
<p id="demo" style="background-color:yellow">testest</p>
</body>
<footer></footer>Upvotes: 0
George Wang
Reputation: 451
window.onload = function() {
document.addEventListener("scroll", myFunction);
var i = 0;
function myFunction() {
document.getElementById("demo").innerHTML = "You scrolled in div." + i++;
var lastScroll = document.getScroll();
if (lastScroll[1] >= 100) {
document.getElementById("myDIV").classList.add('scroll');
} else {
document.getElementById("myDIV").classList.remove('scroll');
}
}
document.getScroll = function() {
if (window.pageYOffset != undefined) {
return [pageXOffset, pageYOffset];
} else {
var sx, sy, d = document,
r = d.documentElement,
b = d.body;
sx = r.scrollLeft || b.scrollLeft || 0;
sy = r.scrollTop || b.scrollTop || 0;
return [sx, sy];
}
}
}table {
width: 1900px;
position: relative;
}
.scroll {
position: fixed;
top: 0 !important;
width: 1900px;
}
.scroll tr {
display: flex;
}
.scroll th {
display: block;
width: 100%;
border-right: 2px solid white;
}
#myDIV {
background-color: #ccc;
}
header {
height: 100px;
}
footer {
height: 2000px;
}<html>
<header>
</header>
<body>
<table style="">
<thead id="myDIV">
<tr>
<th style="width:25%">Column1</th>
<th style="width:25%">Column2</th>
<th style="width:25%">Column3</th>
<th style="width:25%">Column4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:25%">aaaaaaaaaaa</td>
<td style="width:25%">bbbbbbbbbbb</td>
<td style="width:25%">ccccccccccc</td>
<td style="width:25%">ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
<tr>
<td>aaaaaaaaaaa</td>
<td>bbbbbbbbbbb</td>
<td>ccccccccccc</td>
<td>ddddddddddd</td>
</tr>
</tbody>
</table>
<p id="demo" style="background-color:yellow">testest</p>
</body>
<footer></footer>Upvotes: 1
Related Questions
- table header not displaying in responsive table
- Fixed header in HTML Table
- Fixed header within table when scrolling the table
- CSS fixed header for table without specify width
- Responsive table mobile, header of table
- Fixed table header does not match column width of the body
- How to make a responsive table header?
- Html table with fixed header and fixed column both
- HTML Table Fixed Header with Responsive Table Width
- HTML table with fixed header/columns - css solution - not working in Firefox