我想制作一个冻结顶行的 html 表格（因此当您垂直向下滚动时，您总能看到它）。
有没有一种聪明的方法可以在没有 javascript 的情况下实现这一点？
请注意，我不需要冻结左列。
【问题讨论】：
我知道这有几个答案，但这些都没有真正帮助我。我发现 [这篇文章][1] 解释了为什么我的 sticky 没有按预期运行。
基本上，您不能在<thead> 或<tr> 元素上使用position: sticky;。但是，它们可以用于<th>。
使它工作所需的最少代码如下：
table {
text-align: left;
position: relative;
}
th {
background: white;
position: sticky;
top: 0;
}
将表格设置为相对，<th> 可以设置为粘性，顶部为 0
[1]：https://css-tricks.com/position-sticky-and-table-headers/
注意：必须用最大高度的 div 包裹表格：
<div id="managerTable" >
...
</div>
地点：
#managerTable {
max-height: 500px;
overflow: auto;
}
【讨论】：
position: -webkit-sticky; /* Safari */ position: sticky; /* and other browsers */
th 需要background: white; 吗？或tabletext-align: left;?
这称为固定页眉滚动。有许多记录在案的方法：
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，它与我的方法非常相似，您可以使用一个很好的（尽管很复杂）示例来实现这一点。
【讨论】：
overflow: auto）。这在 IE 中不起作用。尝试在 IE 中查看他的页面，当您在 Chrome 或 FF 中进行对比时，您会明白我的意思
根据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
}
【讨论】：
我担心的不是固定宽度的单元格。在任何情况下这似乎都不起作用。 我发现这个解决方案似乎是我需要的。我在这里为其他正在寻找方法的人发布它。看看这个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>【讨论】：
height: 100vh，而不是160px的高度：.container { overflow-y: auto; height: 160px; }。我还设置了html, body {overflow: hidden;}。
表格的第一行可以使用 CSS position: sticky;
MDN ref:
.table-class tr:first-child>td{
position: sticky;
top: 0;
}
【讨论】：
position: sticky; 的工作方式，可能还需要设置background-color 和z-index。
table 设置border-collapse: separate;，以便边框样式始终与粘性单元格保持一致。
您可以使用两个 div，一个用于标题，另一个用于表格。然后使用
#headings {
position: fixed;
top: 0px;
width: 960px;
}
正如@ptriek 所说，这仅适用于固定宽度的列。
【讨论】：
可以在<th> 上使用position:fixed（<th> 是顶行）。
【讨论】：
Chromatable jquery 插件允许使用允许百分比的宽度的固定标题（或顶行）——当然，只有 100% 的百分比。
http://www.chromaloop.com/posts/chromatable-jquery-plugin
我想不出没有javascript你怎么能做到这一点。
更新：新链接 -> http://www.jquery-plugins.info/chromatable-00012248.htm
【讨论】：
我用这个：
tbody{
overflow-y: auto;
height: 350px;
width: 102%;
}
thead,tbody{
display: block;
}
我使用引导 css col-md-xx 定义列宽。如果不定义列宽，则 的自动宽度与 . 102% 是因为溢出导致你失去了一些空间
【讨论】：
height!=100%，标题不会停留在固定位置。
使用 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 的边距
【讨论】：