Question

我一直在努力尝试冻结表格标题及其上面的所有内容。我发表了一个类似的问题并得到了一个我认为很好的答案，但最终没有做到这一点。

不需要跨浏览器支持，只需谷歌浏览器。

当我向下滚动时，我正试图让这部分html冻结：

<input>input1</input>
<input>input2</input>
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
<tr><th>header1</th><th>header2</th><th>header3</th><th>header4</th><th>header5</th></tr>

这是小提琴（请根据答案发布一个小提琴）：

jsfiddle

由于

Answer 1

复制并粘贴此内容：

<div style="position:fixed; height:40px;">
<input>input1</input>
<input>input2</input>
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
<table >
    <tr ><th>header1</th><th>header2</th><th>header3</th><th>header4</th><th>header5</th></tr>
</table>
</div>
<p style="height:2000px; padding-top:150px;">hello</p>

Answer 2

.header-cont {
    width:100%;
    position:fixed;
    top:0px;
}
.header {
    height:52px;
    background:#FFFFFF;
       margin:0px auto;
}
.content {
    width:960px;
    background: #FFFFFF;
       margin: 30px auto;
}

table {
    border-collapse:collapse;
}


td ,th{
  text-align: center;
  border-bottom: 2px solid black;
  border-top: 2px solid black;
  border-left: 2px solid black;
}

#t1 tr td{
    visibility:hidden;

}

#t2{
    padding-top: 42px;
display: block;

}

这是 Demo

如何在向下滚动时冻结表格标题及其上方的所有内容？

2 个答案: