Question

我正在尝试将页眉固定在表格标题的顶部，并使页面的其余部分和表格主体随着页面滚动而移动。

我通过将表标题复制到固定顶部并在顶部的固定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>

下面是预期结果的图片： How do I close a modal window after AJAX success

Answer 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>

如何修复页面页眉+表头并使用页面滚动来滚动表主体和页面页脚

1 个答案: