只为 html 表冻结顶行(固定表头滚动)

这就是所谓的固定头部滚动:

Http://www.imaputz.com/cssstuff/bigfourversion.html

如果没有 JavaScript，您将无法有效地实现这一点... ... 特别是如果您想要跨浏览器支持的话。

任何方法都有许多陷阱，特别是在跨浏览器/版本支持方面。

编辑:

即使它不是您想要修复的头部，而是数据的第一行，概念仍然是相同的。我不是百分之百确定。

额外的想法 我的公司要求我研究一个可以在 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 和 head 标签，但这也是有缺陷的，因为 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中不起作用，所以我只能使用绝对定位来将它们放到合适的位置)。

有人在那里，使光滑网格有一个非常相似的方法，我的，你可以使用和一个很好的(尽管复杂)实现这一点的例子。

Https://github.com/6pac/slickgrid/wiki

您可以使用两个 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

根据 具有固定标题的纯 CSS 可滚动表，我编写了一个 演示，通过将 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
}

我用这个:

tbody{
overflow-y: auto;
height: 350px;
width: 102%;
}
thead,tbody{
display: block;
}

我使用 bootstrap css col- md-xx 定义了列宽。如果不定义列宽，则。百分之102是因为你失去了一些与溢出的感觉

我所关心的是不要有固定宽度的电池，这看起来在任何情况下都不起作用。 我找到了我需要的解决方案。我把它张贴在这里为其他人寻找一种方式。看看这个 < a href = “ https://jsfiddle.net/dPixie/byB9d/3/light/”rel = “ norefrer”> 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>

使用 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) ，即“固定位置” 并格式化为 -30像素的边距

可以对表的第一行使用 CSS position: sticky; 联络电话参考:

.table-class tr:first-child>td{
position: sticky;
top: 0;
}

我知道这有几个答案，但没有一个真正帮助我。我发现了 这篇文章，这解释了为什么我的 sticky没有像预期的那样运行。

基本上，您不能在 <thead>或 <tr>元素上使用 position: sticky;。但是，它们可以在 <th>上使用。

使其工作所需的最低代码如下:

table {
text-align: left;
position: relative;
}


th {
background: white;
position: sticky;
top: 0;
}

随着表设置为相对 <th>可以设置为粘性，顶部为0

注意: 有必要用一个 div 来包装表格，使用 max-height:

<div id="managerTable" >
...
</div>

地点:

#managerTable {
max-height: 500px;
overflow: auto;
}