一旦它向下滚动到固定在顶部的位置,我就试图修复它的表头。
我设法通过制作一个JavaScript来检测滚动位置,然后应用css将该位置固定在顶部,从而修复了标题
但是标题的列大小失去了,显然变小了。
如果有人能帮助您,我将不胜感激?
<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>
答案 0 :(得分:1)
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>
答案 1 :(得分:1)
#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>
答案 2 :(得分:0)
如果您不需要旧版浏览器,则可以使用position: sticky
。粘性是CSS-3中的强大属性,了解position sticky
link for sticky
如果您需要旧的浏览器支持,则可以使用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>