我想制作一个顶行冻结的html表（所以当你垂直向下滚动时，你总能看到它）。
有没有一种聪明的方法可以在没有javascript的情况下实现这一目标？
请注意，我不需要冻结左列。
答案 0 :(得分：60)
这称为固定页眉滚动。有许多记录在案的方法：
http://www.imaputz.com/cssStuff/bigFourVersion.html
如果没有JavaScript，你将不会有效地解决这个问题......特别是如果你想要跨浏览器支持。
您采取的方法有很多，尤其是跨浏览器/版本支持。
编辑：
即使它不是你要修复的标题，但第一行数据，概念仍然是相同的。我不是100％你所指的。
其他想法 我公司的任务是研究可以在IE7 +，Firefox和Chrome中运行的解决方案。
经过多次搜索，尝试和挫折之后，它真正归结为一个根本问题。在大多数情况下，为了获得固定的标题，您需要实现固定的高度/宽度列，因为大多数解决方案涉及使用两个单独的表，一个用于标题，它将浮动并保留在包含数据的第二个表的位置
//float this one right over second table
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
<table>
//Data
</table>
一些尝试的替代方法是利用tbody和thead标签，但这也是有缺陷的，因为IE不会允许你在tbody上放置一个滚动条，这意味着你不能限制它的高度（所以愚蠢的IMO）。
<table>
<thead style="do some stuff to fix its position">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody style="No scrolling allowed here!">
Data here
</tbody>
</table>
这种方法有许多问题，例如确保精确的像素宽度，因为表格非常可爱，因为不同的浏览器会根据计算分配不同的像素，而您根本无法（AFAIK）保证分发在所有情况下都是完美的。如果你的桌子上有边框，那就显而易见了。
我采取了不同的方法，并说螺丝表，因为你无法做出这个保证。我用div来模仿表格。这也存在定位行和列的问题（主要是因为浮动有问题，使用内嵌块对IE7不起作用，所以它真的让我使用绝对定位将它们放在适当的位置）。
有人在那里制作了Slick Grid，它采用了与我非常相似的方法，你可以使用一个好的（尽管很复杂的）例子来实现这个目标。
答案 1 :(得分：37)
根据Pure CSS Scrollable Table with Fixed Header，我写了一个DEMO，通过将overflow:auto设置为tbody来轻松修复标题。
table thead tr{
display:block;
}
table th,table td{
width:100px;//fixed width
}
table tbody{
display:block;
height:200px;
overflow:auto;//set tbody to auto
}
答案 2 :(得分：26)
我担心的是没有固定宽度的细胞。在任何情况下似乎都无效。 我发现这个解决方案似乎是我需要的。我在这里发帖给其他正在搜索的人。看看这个fiddle
工作代码段
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 160px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>
答案 3 :(得分：13)
截至2019年，我发现的最佳答案是@shahriyar-ahmed使用CSS /*This will work on every browser but Chrome Browser*/
.table-fixed thead {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
background-color: #000;
color: #fff;
}
/*This will work on every browser*/
.table-fixed thead th {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
background-color: #000;
color: #fff;
}的答案：
https://stackoverflow.com/a/52144195/4519548
他使用了以下CSS：
<table class="table-fixed">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>import re
#read the file
name = input('Input file name:')
handle = open(name)
#look for integers usings re.findall() / '[0-9]+'
y = re.findall('[0-9]+',handle)
print(y)
答案 4 :(得分：8)
我知道这有几个答案，但是这些都没有真正帮助我。我发现this article可以解释为什么我的sticky不能按预期运行。
基本上，不能在position: sticky;或<thead>元素上使用<tr>。但是，它们可以在<th>上使用。
我需要使其工作的最低代码如下：
table {
text-align: left;
position: relative;
}
th {
background: white;
position: sticky;
top: 0;
}
在表格相对的情况下，<th>可以设置为粘性，顶部为0
答案 5 :(得分：4)
可以使用position:fixed上的<th>（<th>作为第一行）。
答案 6 :(得分：3)
你可以使用两个div作为标题，另一个作为表。然后使用
#headings {
position: fixed;
top: 0px;
width: 960px;
}
正如@ptriek所说，这只适用于固定宽度的列。
答案 7 :(得分：2)
您可以将CSS position: sticky;用于表的第一行
MDN ref:
.table-class tr:first-child>td{
position: sticky;
top: 0;
}
答案 8 :(得分：1)
Chromatable jquery插件允许固定标题（或顶行）的宽度允许百分比 - 只授予100％的百分比。
http://www.chromaloop.com/posts/chromatable-jquery-plugin
我想不出没有javascript就可以做到这一点。
更新：新链接 - ＆gt; http://www.jquery-plugins.info/chromatable-00012248.htm
答案 9 :(得分：0)
我用这个：
tbody{
overflow-y: auto;
height: 350px;
width: 102%;
}
thead,tbody{
display: block;
}
我使用bootstrap css col-md-xx定义列宽。在没有定义列宽度的情况下，自动宽度与自动宽度不匹配。 102％的百分比是因为你失去了溢出的一些sapce
答案 10 :(得分：0)
使用css斑马造型
复制粘贴此示例并查看标题已修复。
<style>
.zebra tr:nth-child(odd){
background:white;
color:black;
}
.zebra tr:nth-child(even){
background: grey;
color:black;
}
.zebra tr:nth-child(1) {
background:black;
color:yellow;
position: fixed;
margin:-30px 0px 0px 0px;
}
</style>
<DIV id= "stripped_div"
class= "zebra"
style = "
border:solid 1px red;
height:15px;
width:200px;
overflow-x:none;
overflow-y:scroll;
padding:30px 0px 0px 0px;"
>
<table>
<tr >
<td>Name:</td>
<td>Age:</td>
</tr>
<tr >
<td>Peter</td>
<td>10</td>
</tr>
</table>
</DIV>
注意div中30px的顶部填充 第一行剥离数据使用的空间 即tr：nth-child（1）即“固定位置” 并格式化为-30px的边距