我正在尝试将表头固定在顶部的页眉，并使页面的其余部分和表体随着页面滚动而移动。
我找到了一个可行的解决方案，它几乎完成了预期的工作，方法是将表头复制到固定顶部，并使一个 div 在顶部的固定 div 下方滑动，但是正文列并不总是与表头和与相同的大小。放大和缩小时效果不佳:有时两个标题都可见或重叠。
//IE 9 compatible
var header = document.getElementById("zmyHeader");
var divResults = document.getElementById("divResults");
var h = header.getBoundingClientRect().bottom - header.getBoundingClientRect().top;
var divheadertbl = document.getElementById("headerResultTblFixedDiv");
if (divheadertbl) {
var hdivheadertbl = divheadertbl.getBoundingClientRect().bottom - divheadertbl.getBoundingClientRect().top;
divResults.style.paddingTop = (h - hdivheadertbl - 5) + "px";
}
window.onscroll = function() {
myFunction()
};
function myFunction() {
var Y = document.body.scrollLeft;
var j = Y;
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
document.getElementById("zmyHeader").style.marginLeft = -x + "px";
}.sticky {
position: fixed;
top: 0;
align: center;
width: 100%;
background-color: #fff;
}<div ID="zmyHeader" class="sticky">
...
<div id="headerResultTblFixedDiv">
<table id="headerResultTblFixed">
<thead>
<tr>
<th>Col1Head</th>
<th>Col2Head</th>
</tr>
</thead>
</table>
</div>
</div>
<div id="divResults" style="padding:0px;width:100%">
<!---div resultados-->
<table id="resultsTable" width="967" border="0" align="center" cellpadding="2" cellspacing="0" bgcolor="white">
</tr>
<td></td>
</tr>
</table>
</div>下面是预期结果的图片:
最佳答案
试试这段代码。我没有使用 javascript。只使用了 html 和 css。我没有使用表格标题，而是使用了简单的段落标签，您也可以使用标题标签。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
*{
box-sizing: border-box;
}
header h1{
top: -20px;
text-align: center;
background-color: aquamarine;
padding: 80px;
position: fixed;
min-width: 100%;
}
main{
position: fixed;
min-width: 100%;
clear: both;
margin-top:-79px ;
}
main div {
min-width:100%;
margin-left: 5px;
margin-bottom: -150px;
}
main p{
float:left;
min-width: 33%;
text-align: center;
border: 1px solid ;
padding: 20px;
background-color: aquamarine
}
footer h1{
margin-top: 50px;
text-align: center;
background-color: aquamarine;
padding: 80px;
min-width: 100%;
}
section{
clear:both;
}
table {
border: 1px solid blue;
min-width: 100%;
clear: both;
margin-top: 250px;
}
tr td{
border: 1px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<section>
<header>
<h1>This Is Header</h1>
</header>
<main>
<div>
<p>Header 1</p><p>Header 1</p><p>Header 1</p>
</div>
</main>
</section>
<section>
<table>
<tr><td>Table Data 1</td><td>Table Data 2</td><td>Table Data 3</td></tr>
<tr><td>Table Data 3</td><td>Table Data 4</td><td>Table Data 3</td></tr>
<tr><td>Table Data 1</td><td>Table Data 2</td><td>Table Data 3</td></tr>
<tr><td>Table Data 3</td><td>Table Data 4</td><td>Table Data 3</td></tr>
<tr><td>Table Data 1</td><td>Table Data 2</td><td>Table Data 3</td></tr>
<tr><td>Table Data 3</td><td>Table Data 4</td><td>Table Data 3</td></tr>
<tr><td>Table Data 1</td><td>Table Data 2</td><td>Table Data 3</td></tr>
<tr><td>Table Data 3</td><td>Table Data 4</td><td>Table Data 3</td></tr>
</table>
</section>
<footer>
<h1>This Is footer</h1>
</footer>
</body>
</html>
关于javascript - 如何使用页面滚动修复页眉+表头和滚动表体和页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54258345/