如何通过页面滚动修复页眉+表头和滚动表体和页脚答案

【问题标题】：how to fix page header+table header and scroll table body and page footer with page scroll如何通过页面滚动修复页眉+表头和滚动表体和页脚
【发布时间】：2019-06-12 23:26:07
【问题描述】：

我正在尝试修复页面标题，表格标题位于顶部，并使页面的其余部分和表格主体随着页面滚动而移动。

我找到了一个可行的解决方案，它几乎可以完成预期的工作，方法是将表格标题复制到固定顶部，并在顶部的固定 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>

下面是预期结果的图片：

【问题讨论】：

你在<tr> 的开头有一个错字，也许这会有所帮助。
您是否尝试过使用 CSS：#headerResultTblFixedDiv { position: fixed; top: 0;}？

标签： javascript html css

【解决方案1】：

试试这段代码。我没用过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>

【讨论】：

嗨。感谢回复。该解决方案与我自己的问题相同。它没有正确地将列与标题对齐。