Question

我正在网站上工作。我已经修复了大部分页面，除了我希望中间的表格使用主滚动条滚动。然后我在背景中有一个我想部分透过的图像。我有它主要工作。我无法弄清楚的唯一部分是如何让表格内容落后，甚至在它到达标题时停止。我会包括一个小提琴，这样你就可以看到我在说什么。 HTML：

<body>
<div id="background"></div>
<div id="tableBackground"></div>
    <div id="fixedHeader">
        <h1>fixed header</h1>
        <h2>Subheading</h2>
    </div>
    <div id="tableContainer">
        <table class="stocks compact display cell-border">
            <tr><td>row 1 cell 1</td><td>row 1 cell 2</td></tr>
            <tr><td>row 2 cell 1</td><td>row 2 cell 2</td></tr>
            <tr><td>row 3 cell 1</td><td>row 3 cell 2</td></tr>
            <tr><td>row 4 cell 1</td><td>row 4 cell 2</td></tr>
            <tr><td>row 5 cell 1</td><td>row 5 cell 2</td></tr>
            <tr><td>row 6 cell 1</td><td>row 6 cell 2</td></tr>
            <tr><td>row 7 cell 1</td><td>row 7 cell 2</td></tr>
            <tr><td>row 8 cell 1</td><td>row 8 cell 2</td></tr>
            <tr><td>row 9 cell 1</td><td>row 9 cell 2</td></tr>
            <tr><td>row 10 cell 1</td><td>row 10 cell 2</td></tr>
            <tr><td>row 11 cell 1</td><td>row 11 cell 2</td></tr>
            <tr><td>row 12 cell 1</td><td>row 12 cell 2</td></tr>
            <tr><td>row 13 cell 1</td><td>row 13 cell 2</td></tr>
            <tr><td>row 14 cell 1</td><td>row 14 cell 2</td></tr>
            <tr><td>row 15 cell 1</td><td>row 15 cell 2</td></tr>
            <tr><td>row 16 cell 1</td><td>row 16 cell 2</td></tr>
            <tr><td>row 17 cell 1</td><td>row 17 cell 2</td></tr>
            <tr><td>row 18 cell 1</td><td>row 18 cell 2</td></tr>
            <tr><td>row 19 cell 1</td><td>row 19 cell 2</td></tr>
            <tr><td>row 20 cell 1</td><td>row 20 cell 2</td></tr>
            <tr><td>row 21 cell 1</td><td>row 21 cell 2</td></tr>
            <tr><td>row 22 cell 1</td><td>row 22 cell 2</td></tr>
            <tr><td>row 23 cell 1</td><td>row 23 cell 2</td></tr>
            <tr><td>row 24 cell 1</td><td>row 24 cell 2</td></tr>
            <tr><td>row 25 cell 1</td><td>row 25 cell 2</td></tr>
            <tr><td>row 26 cell 1</td><td>row 26 cell 2</td></tr>
            <tr><td>row 27 cell 1</td><td>row 27 cell 2</td></tr>
            <tr><td>row 28 cell 1</td><td>row 28 cell 2</td></tr>
            <tr><td>row 29 cell 1</td><td>row 29 cell 2</td></tr>
            <tr><td>row 30 cell 1</td><td>row 30 cell 2</td></tr>
            <tr><td>row 31 cell 1</td><td>row 31 cell 2</td></tr>
            <tr><td>row 32 cell 1</td><td>row 32 cell 2</td></tr>
            <tr><td>row 33 cell 1</td><td>row 33 cell 2</td></tr>
            <tr><td>row 34 cell 1</td><td>row 34 cell 2</td></tr>
            <tr><td>row 35 cell 1</td><td>row 35 cell 2</td></tr>
            <tr><td>row 36 cell 1</td><td>row 36 cell 2</td></tr>
            <tr><td>row 37 cell 1</td><td>row 37 cell 2</td></tr>
            <tr><td>row 38 cell 1</td><td>row 38 cell 2</td></tr>
            <tr><td>row 39 cell 1</td><td>row 39 cell 2</td></tr>
            <tr><td>row 40 cell 1</td><td>row 40 cell 2</td></tr>
            <tr><td>row 41 cell 1</td><td>row 41 cell 2</td></tr>
            <tr><td>row 42 cell 1</td><td>row 42 cell 2</td></tr>
            <tr><td>row 43 cell 1</td><td>row 43 cell 2</td></tr>
            <tr><td>row 44 cell 1</td><td>row 44 cell 2</td></tr>
            <tr><td>row 45 cell 1</td><td>row 45 cell 2</td></tr>
            <tr><td>row 46 cell 1</td><td>row 46 cell 2</td></tr>
        </table>
    </div>
</body>

CSS：

    html { 
    background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

html,body{
  margin: 0;
  padding: 0;
}

#background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
}

#tableBackground {
    position: fixed;
    width: 90%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.8);
    left: 0;
    right: 0;
    z-index: 0;
}

#fixedHeader {
    position: fixed;
    left: 50%;
    top: 0;
    margin-left:-600px;
    width: 1200px;
    height: 80px;
    z-index: 10;
}

#tableContainer {
    position: relative;
    top: 80px;
    width: 1200px;
    margin: 0 auto;
}

.stocks {
    margin: 20px auto;
}

h1 {
    font-size: 1.4em;
    text-align: center;
}

h2 {
    font-size: 1.2em;
    text-align: center;
}

这是我的this所以你可以看到我在描述什么。当页面向上滚动时，您可以看到表格内容显示在标题后面。我希望它在到达标题时隐藏。

Answer 1

如果你绝对想要整个页面的滚动而不仅仅是问题中的标题 -

您可以使用新的clip-path属性和一些脚本来修改用户滚动时的剪切值，如下所示。

$(window).on('scroll', function() {
  var scrolltop = $(this).scrollTop();
  $('.clip-me').css({
    '-webkit-clip-path': 'inset(' + (scrolltop) + 'px 0 0 0)',
    'clip-path': 'inset(' + (scrolltop) + 'px 0 0 0)',
    'clip': 'rect(' + (scrolltop) + 'px, auto, auto, auto)'
  });
});

html {
  background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
#background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
}
#tableBackground {
  position: fixed;
  width: 90%;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.8);
  left: 0;
  right: 0;
  z-index: 0;
}
#fixedHeader {
  position: fixed;
  left: 50%;
  top: 0;
  margin-left: -600px;
  width: 1200px;
  height: 80px;
  z-index: 10;
}
#tableContainer {
  position: absolute; /*-The fallback clip proerty requires absolute of fixed-*/
  top: 80px;
  width: 100%; /*---------- Modified for demo purpose ------------*/
  margin: 0 auto;
}
.stocks {
  margin: 20px auto;
}
h1 {
  font-size: 1.4em;
  text-align: center;
}
h2 {
  font-size: 1.2em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background"></div>
<div id="tableBackground"></div>
<div id="fixedHeader">
  <h1>fixed header</h1>
  <h2>Subheading</h2>
</div>
<div id="tableContainer" class="clip-me">
  <table class="stocks compact display cell-border">
    <tr>
      <td>row 1 cell 1</td>
      <td>row 1 cell 2</td>
    </tr>
    <tr>
      <td>row 2 cell 1</td>
      <td>row 2 cell 2</td>
    </tr>
    <tr>
      <td>row 3 cell 1</td>
      <td>row 3 cell 2</td>
    </tr>
    <tr>
      <td>row 4 cell 1</td>
      <td>row 4 cell 2</td>
    </tr>
    <tr>
      <td>row 5 cell 1</td>
      <td>row 5 cell 2</td>
    </tr>
    <tr>
      <td>row 6 cell 1</td>
      <td>row 6 cell 2</td>
    </tr>
    <tr>
      <td>row 7 cell 1</td>
      <td>row 7 cell 2</td>
    </tr>
    <tr>
      <td>row 8 cell 1</td>
      <td>row 8 cell 2</td>
    </tr>
    <tr>
      <td>row 9 cell 1</td>
      <td>row 9 cell 2</td>
    </tr>
    <tr>
      <td>row 10 cell 1</td>
      <td>row 10 cell 2</td>
    </tr>
    <tr>
      <td>row 11 cell 1</td>
      <td>row 11 cell 2</td>
    </tr>
    <tr>
      <td>row 12 cell 1</td>
      <td>row 12 cell 2</td>
    </tr>
    <tr>
      <td>row 13 cell 1</td>
      <td>row 13 cell 2</td>
    </tr>
    <tr>
      <td>row 14 cell 1</td>
      <td>row 14 cell 2</td>
    </tr>
    <tr>
      <td>row 15 cell 1</td>
      <td>row 15 cell 2</td>
    </tr>
    <tr>
      <td>row 16 cell 1</td>
      <td>row 16 cell 2</td>
    </tr>
    <tr>
      <td>row 17 cell 1</td>
      <td>row 17 cell 2</td>
    </tr>
    <tr>
      <td>row 18 cell 1</td>
      <td>row 18 cell 2</td>
    </tr>
    <tr>
      <td>row 19 cell 1</td>
      <td>row 19 cell 2</td>
    </tr>
    <tr>
      <td>row 20 cell 1</td>
      <td>row 20 cell 2</td>
    </tr>
    <tr>
      <td>row 21 cell 1</td>
      <td>row 21 cell 2</td>
    </tr>
    <tr>
      <td>row 22 cell 1</td>
      <td>row 22 cell 2</td>
    </tr>
    <tr>
      <td>row 23 cell 1</td>
      <td>row 23 cell 2</td>
    </tr>
    <tr>
      <td>row 24 cell 1</td>
      <td>row 24 cell 2</td>
    </tr>
    <tr>
      <td>row 25 cell 1</td>
      <td>row 25 cell 2</td>
    </tr>
    <tr>
      <td>row 26 cell 1</td>
      <td>row 26 cell 2</td>
    </tr>
    <tr>
      <td>row 27 cell 1</td>
      <td>row 27 cell 2</td>
    </tr>
    <tr>
      <td>row 28 cell 1</td>
      <td>row 28 cell 2</td>
    </tr>
    <tr>
      <td>row 29 cell 1</td>
      <td>row 29 cell 2</td>
    </tr>
    <tr>
      <td>row 30 cell 1</td>
      <td>row 30 cell 2</td>
    </tr>
    <tr>
      <td>row 31 cell 1</td>
      <td>row 31 cell 2</td>
    </tr>
    <tr>
      <td>row 32 cell 1</td>
      <td>row 32 cell 2</td>
    </tr>
    <tr>
      <td>row 33 cell 1</td>
      <td>row 33 cell 2</td>
    </tr>
    <tr>
      <td>row 34 cell 1</td>
      <td>row 34 cell 2</td>
    </tr>
    <tr>
      <td>row 35 cell 1</td>
      <td>row 35 cell 2</td>
    </tr>
    <tr>
      <td>row 36 cell 1</td>
      <td>row 36 cell 2</td>
    </tr>
    <tr>
      <td>row 37 cell 1</td>
      <td>row 37 cell 2</td>
    </tr>
    <tr>
      <td>row 38 cell 1</td>
      <td>row 38 cell 2</td>
    </tr>
    <tr>
      <td>row 39 cell 1</td>
      <td>row 39 cell 2</td>
    </tr>
    <tr>
      <td>row 40 cell 1</td>
      <td>row 40 cell 2</td>
    </tr>
    <tr>
      <td>row 41 cell 1</td>
      <td>row 41 cell 2</td>
    </tr>
    <tr>
      <td>row 42 cell 1</td>
      <td>row 42 cell 2</td>
    </tr>
    <tr>
      <td>row 43 cell 1</td>
      <td>row 43 cell 2</td>
    </tr>
    <tr>
      <td>row 44 cell 1</td>
      <td>row 44 cell 2</td>
    </tr>
    <tr>
      <td>row 45 cell 1</td>
      <td>row 45 cell 2</td>
    </tr>
    <tr>
      <td>row 46 cell 1</td>
      <td>row 46 cell 2</td>
    </tr>
  </table>
</div>

注意：

clip-path相对较新，因此您需要添加浏览器前缀并回退到clip属性，现在已弃用（但是非常Browser Compatibility}支持clip-path。
clip属性要求元素为absolute或 fixed定位

旁注：我仅使用最新版本的google-chrome和microsoft-edge对此进行了测试。表格宽度设置为100%仅用于演示目的 - 因此可以在片段中轻松查看，而无需水平滚动。

Answer 2

<强> CSS ：

html,
body {
    margin: 0;
    padding: 0;
}
#background {
    background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
}
#tableBackground {
    position: fixed;
    top: 30px;
    width: 90%;
    height: 100%;
    max-width: 1200px;
    background: rgba(255, 255, 255, 0.8);
    left: 0;
    right: 0;
    z-index: 0;
    margin: 0 auto;
}
#fixedHeader {
    position: fixed;
    overflow: hidden;
    left: 50%;
    top: 30px;
    margin-left: -600px;
    width: 1200px;
    height: 80px;
    z-index: 10;
}
#tableContainer {
    height: 80%;
    overflow: auto;
    position: fixed;
    top: 120px;
    width: 100%;
    margin: 0 auto;
}
.stocks {
    margin: 20px auto;
}
h1 {
    font-size: 1.4em;
    text-align: center;
}
h2 {
    font-size: 1.2em;
    text-align: center;
}

这是 fiddle 。

html,
body {
  margin: 0;
  padding: 0;
}
#background {
  background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 100%;
}
#tableBackground {
  position: fixed;
  top: 30px;
  width: 90%;
  height: 100%;
  max-width: 1200px;
  background: rgba(255, 255, 255, 0.8);
  left: 0;
  right: 0;
  z-index: 0;
  margin: 0 auto;
}
#fixedHeader {
  position: fixed;
  overflow: hidden;
  left: 50%;
  top: 30px;
  margin-left: -600px;
  width: 1200px;
  height: 80px;
  z-index: 10;
}
#tableContainer {
  height: 80%;
  overflow: auto;
  position: fixed;
  top: 120px;
  width: 100%;
  margin: 0 auto;
}
.stocks {
  margin: 20px auto;
}
h1 {
  font-size: 1.4em;
  text-align: center;
}
h2 {
  font-size: 1.2em;
  text-align: center;
}

<body>
  <div id="background"></div>
  <div id="tableBackground"></div>
  <div id="fixedHeader">
    <h1>fixed header</h1>
    <h2>Subheading</h2>
  </div>
  <div id="tableContainer">
    <table class="stocks compact display cell-border">
      <tr>
        <td>row 1 cell 1</td>
        <td>row 1 cell 2</td>
      </tr>
      <tr>
        <td>row 2 cell 1</td>
        <td>row 2 cell 2</td>
      </tr>
      <tr>
        <td>row 3 cell 1</td>
        <td>row 3 cell 2</td>
      </tr>
      <tr>
        <td>row 4 cell 1</td>
        <td>row 4 cell 2</td>
      </tr>
      <tr>
        <td>row 5 cell 1</td>
        <td>row 5 cell 2</td>
      </tr>
      <tr>
        <td>row 6 cell 1</td>
        <td>row 6 cell 2</td>
      </tr>
      <tr>
        <td>row 7 cell 1</td>
        <td>row 7 cell 2</td>
      </tr>
      <tr>
        <td>row 8 cell 1</td>
        <td>row 8 cell 2</td>
      </tr>
      <tr>
        <td>row 9 cell 1</td>
        <td>row 9 cell 2</td>
      </tr>
      <tr>
        <td>row 10 cell 1</td>
        <td>row 10 cell 2</td>
      </tr>
      <tr>
        <td>row 11 cell 1</td>
        <td>row 11 cell 2</td>
      </tr>
      <tr>
        <td>row 12 cell 1</td>
        <td>row 12 cell 2</td>
      </tr>
      <tr>
        <td>row 13 cell 1</td>
        <td>row 13 cell 2</td>
      </tr>
      <tr>
        <td>row 14 cell 1</td>
        <td>row 14 cell 2</td>
      </tr>
      <tr>
        <td>row 15 cell 1</td>
        <td>row 15 cell 2</td>
      </tr>
      <tr>
        <td>row 16 cell 1</td>
        <td>row 16 cell 2</td>
      </tr>
      <tr>
        <td>row 17 cell 1</td>
        <td>row 17 cell 2</td>
      </tr>
      <tr>
        <td>row 18 cell 1</td>
        <td>row 18 cell 2</td>
      </tr>
      <tr>
        <td>row 19 cell 1</td>
        <td>row 19 cell 2</td>
      </tr>
      <tr>
        <td>row 20 cell 1</td>
        <td>row 20 cell 2</td>
      </tr>
      <tr>
        <td>row 21 cell 1</td>
        <td>row 21 cell 2</td>
      </tr>
      <tr>
        <td>row 22 cell 1</td>
        <td>row 22 cell 2</td>
      </tr>
      <tr>
        <td>row 23 cell 1</td>
        <td>row 23 cell 2</td>
      </tr>
      <tr>
        <td>row 24 cell 1</td>
        <td>row 24 cell 2</td>
      </tr>
      <tr>
        <td>row 25 cell 1</td>
        <td>row 25 cell 2</td>
      </tr>
      <tr>
        <td>row 26 cell 1</td>
        <td>row 26 cell 2</td>
      </tr>
      <tr>
        <td>row 27 cell 1</td>
        <td>row 27 cell 2</td>
      </tr>
      <tr>
        <td>row 28 cell 1</td>
        <td>row 28 cell 2</td>
      </tr>
      <tr>
        <td>row 29 cell 1</td>
        <td>row 29 cell 2</td>
      </tr>
      <tr>
        <td>row 30 cell 1</td>
        <td>row 30 cell 2</td>
      </tr>
      <tr>
        <td>row 31 cell 1</td>
        <td>row 31 cell 2</td>
      </tr>
      <tr>
        <td>row 32 cell 1</td>
        <td>row 32 cell 2</td>
      </tr>
      <tr>
        <td>row 33 cell 1</td>
        <td>row 33 cell 2</td>
      </tr>
      <tr>
        <td>row 34 cell 1</td>
        <td>row 34 cell 2</td>
      </tr>
      <tr>
        <td>row 35 cell 1</td>
        <td>row 35 cell 2</td>
      </tr>
      <tr>
        <td>row 36 cell 1</td>
        <td>row 36 cell 2</td>
      </tr>
      <tr>
        <td>row 37 cell 1</td>
        <td>row 37 cell 2</td>
      </tr>
      <tr>
        <td>row 38 cell 1</td>
        <td>row 38 cell 2</td>
      </tr>
      <tr>
        <td>row 39 cell 1</td>
        <td>row 39 cell 2</td>
      </tr>
      <tr>
        <td>row 40 cell 1</td>
        <td>row 40 cell 2</td>
      </tr>
      <tr>
        <td>row 41 cell 1</td>
        <td>row 41 cell 2</td>
      </tr>
      <tr>
        <td>row 42 cell 1</td>
        <td>row 42 cell 2</td>
      </tr>
      <tr>
        <td>row 43 cell 1</td>
        <td>row 43 cell 2</td>
      </tr>
      <tr>
        <td>row 44 cell 1</td>
        <td>row 44 cell 2</td>
      </tr>
      <tr>
        <td>row 45 cell 1</td>
        <td>row 45 cell 2</td>
      </tr>
      <tr>
        <td>row 46 cell 1</td>
        <td>row 46 cell 2</td>
      </tr>
    </table>
  </div>
</body>

Answer 3

#tableContainer {
    height: 80%;
    margin: 0 auto;
    overflow: auto;
    position: fixed;
    top: 80px;
    width: 100%;
}

使用以上属性更新#tableContainer CSS。标题已修复，始终显示在顶部。内容超出页面，因此浏览器滚动标题后面的内容。我们必须给表容器赋予高度和溢出属性以克服这些问题。

Answer 4

您可以将内容封装在具有固定高度和 overflow：auto 的div中。想法是有一个div而不是页面的滚动。

Updated Fiddle。注意：请检查小提琴，因为窗口大小可能会导致问题

代码

＆＃13;

html { 
  background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.content{
  margin-top:100px;
  height:200px; 
  border:2px solid gray;
  overflow:auto;
}

html,body{
  margin: 0;
  padding: 0;
}

#background {
	position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
}

#tableBackground {
	position: fixed;
	width: 90%;
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.8);
	left: 0;
	right: 0;
	z-index: 0;
  overflow:auto;
}

#fixedHeader {
	position: fixed;
	left: 50%;
    top: 0;
    margin-left:-600px;
    width: 1200px;
    height: 80px;
	z-index: 10;
}

#tableContainer {
	position: relative;
	top: 80px;
	width: 1200px;
	margin: 0 auto;
}

.stocks {
	margin: 20px auto;
}

h1 {
	font-size: 1.4em;
	text-align: center;
}

h2 {
	font-size: 1.2em;
	text-align: center;
}

＆＃13;

<body>
  <div id="background"></div>
  <div id="tableBackground"></div>
  <div id="fixedHeader">
    <h1>fixed header</h1>
    <h2>Subheading</h2>
  </div>
  <div class="content">
    <div id="tableContainer">
      <table class="stocks compact display cell-border">
        <tr>
          <td>row 1 cell 1</td>
          <td>row 1 cell 2</td>
        </tr>
        <tr>
          <td>row 2 cell 1</td>
          <td>row 2 cell 2</td>
        </tr>
        <tr>
          <td>row 3 cell 1</td>
          <td>row 3 cell 2</td>
        </tr>
        <tr>
          <td>row 4 cell 1</td>
          <td>row 4 cell 2</td>
        </tr>
        <tr>
          <td>row 5 cell 1</td>
          <td>row 5 cell 2</td>
        </tr>
        <tr>
          <td>row 6 cell 1</td>
          <td>row 6 cell 2</td>
        </tr>
        <tr>
          <td>row 7 cell 1</td>
          <td>row 7 cell 2</td>
        </tr>
        <tr>
          <td>row 8 cell 1</td>
          <td>row 8 cell 2</td>
        </tr>
        <tr>
          <td>row 9 cell 1</td>
          <td>row 9 cell 2</td>
        </tr>
        <tr>
          <td>row 10 cell 1</td>
          <td>row 10 cell 2</td>
        </tr>
        <tr>
          <td>row 11 cell 1</td>
          <td>row 11 cell 2</td>
        </tr>
        <tr>
          <td>row 12 cell 1</td>
          <td>row 12 cell 2</td>
        </tr>
        <tr>
          <td>row 13 cell 1</td>
          <td>row 13 cell 2</td>
        </tr>
        <tr>
          <td>row 14 cell 1</td>
          <td>row 14 cell 2</td>
        </tr>
        <tr>
          <td>row 15 cell 1</td>
          <td>row 15 cell 2</td>
        </tr>
        <tr>
          <td>row 16 cell 1</td>
          <td>row 16 cell 2</td>
        </tr>
        <tr>
          <td>row 17 cell 1</td>
          <td>row 17 cell 2</td>
        </tr>
        <tr>
          <td>row 18 cell 1</td>
          <td>row 18 cell 2</td>
        </tr>
        <tr>
          <td>row 19 cell 1</td>
          <td>row 19 cell 2</td>
        </tr>
        <tr>
          <td>row 20 cell 1</td>
          <td>row 20 cell 2</td>
        </tr>
        <tr>
          <td>row 21 cell 1</td>
          <td>row 21 cell 2</td>
        </tr>
        <tr>
          <td>row 22 cell 1</td>
          <td>row 22 cell 2</td>
        </tr>
        <tr>
          <td>row 23 cell 1</td>
          <td>row 23 cell 2</td>
        </tr>
        <tr>
          <td>row 24 cell 1</td>
          <td>row 24 cell 2</td>
        </tr>
        <tr>
          <td>row 25 cell 1</td>
          <td>row 25 cell 2</td>
        </tr>
        <tr>
          <td>row 26 cell 1</td>
          <td>row 26 cell 2</td>
        </tr>
        <tr>
          <td>row 27 cell 1</td>
          <td>row 27 cell 2</td>
        </tr>
        <tr>
          <td>row 28 cell 1</td>
          <td>row 28 cell 2</td>
        </tr>
        <tr>
          <td>row 29 cell 1</td>
          <td>row 29 cell 2</td>
        </tr>
        <tr>
          <td>row 30 cell 1</td>
          <td>row 30 cell 2</td>
        </tr>
        <tr>
          <td>row 31 cell 1</td>
          <td>row 31 cell 2</td>
        </tr>
        <tr>
          <td>row 32 cell 1</td>
          <td>row 32 cell 2</td>
        </tr>
        <tr>
          <td>row 33 cell 1</td>
          <td>row 33 cell 2</td>
        </tr>
        <tr>
          <td>row 34 cell 1</td>
          <td>row 34 cell 2</td>
        </tr>
        <tr>
          <td>row 35 cell 1</td>
          <td>row 35 cell 2</td>
        </tr>
        <tr>
          <td>row 36 cell 1</td>
          <td>row 36 cell 2</td>
        </tr>
        <tr>
          <td>row 37 cell 1</td>
          <td>row 37 cell 2</td>
        </tr>
        <tr>
          <td>row 38 cell 1</td>
          <td>row 38 cell 2</td>
        </tr>
        <tr>
          <td>row 39 cell 1</td>
          <td>row 39 cell 2</td>
        </tr>
        <tr>
          <td>row 40 cell 1</td>
          <td>row 40 cell 2</td>
        </tr>
        <tr>
          <td>row 41 cell 1</td>
          <td>row 41 cell 2</td>
        </tr>
        <tr>
          <td>row 42 cell 1</td>
          <td>row 42 cell 2</td>
        </tr>
        <tr>
          <td>row 43 cell 1</td>
          <td>row 43 cell 2</td>
        </tr>
        <tr>
          <td>row 44 cell 1</td>
          <td>row 44 cell 2</td>
        </tr>
        <tr>
          <td>row 45 cell 1</td>
          <td>row 45 cell 2</td>
        </tr>
        <tr>
          <td>row 46 cell 1</td>
          <td>row 46 cell 2</td>
        </tr>
      </table>
    </div>
  </div>
</body>

＆＃13;

固定页面，内容滚动标题后面

4 个答案:

代码