Cra*_*een 167 html html-table
我希望能够"调整"HTML表格的演示文稿以添加单个功能:当向下滚动页面以使表格在屏幕上但标题行在屏幕外时,我希望标题保持不变在观察区域的顶部可见.
这在概念上类似于Excel中的"冻结窗格"功能.但是,HTML页面中可能包含多个表,我只希望它发生在当前处于视图中的表中,只有在它处于视图中时才会发生.
注意:我已经看到一种解决方案,其中表数据区域可滚动而标题不滚动.这不是我正在寻找的解决方案.
Cra*_*een 135
我使用jQuery制作了一个概念验证解决方案.
我现在已经在Mercurial bitbucket存储库中获得了此代码.主要文件是tables.html.
我知道一个问题:如果表包含锚点,并且如果在浏览器中打开带有指定锚点的URL,则当页面加载时,带有锚点的行可能会被浮动标题遮盖.
更新2017-12-11:我认为这不适用于当前的Firefox(57)和Chrome(63).不确定何时以及为何停止工作或如何解决问题.但是现在,我认为Hendy Irawan接受的答案是优越的.
小智 68
Craig,我稍微改进了你的代码(在其他一些东西中它现在使用position:fixed)并将其包装为jQuery插件.
在这里尝试:http://jsfiddle.net/jmosbech/stFcx/
并获取源代码:https://github.com/jmosbech/StickyTableHeaders
Hen*_*wan 66
查看jQuery.floatThead(演示可用)非常酷,也可以使用DataTables,甚至可以在overflow: auto容器内工作.
wil*_*nka 12
如果您针对的是符合现代css3的浏览器（浏览器支持： https : //caniuse.com/#feat=css-sticky），则可以使用position:sticky，它不需要JS并且不会破坏表布局的对齐误差和同一列的td。它也不需要固定的列宽即可正常工作。
单个标题行的示例：
thead th
{
position: sticky;
top: 0px;
}
对于具有1或2行的广告，您可以使用以下方法：
thead > :last-child th
{
position: sticky;
top: 30px; /* This is for all the the "th" elements in the second row, (in this casa is the last child element into the thead) */
}
thead > :first-child th
{
position: sticky;
top: 0px; /* This is for all the the "th" elements in the first child row */
}
您可能需要对最后一个孩子的top属性进行一些调整，以更改像素数以匹配第一行的高度（+边距+边框+填充（如果有的话）），因此第二行仅停留在向下在第一个下面。
即使同一页中有多个表，这两种解决方案也都起作用：th每个元素的顶部位置在css定义中指示的位置时，它们的元素开始发粘，而当所有表向下滚动时，它们都消失。因此，如果有更多的表格，所有表格的工作方式都一样优美。
为什么要使用最后一个孩子之前和第一胎后，在CSS？
因为CSS规则是由浏览器呈现的，其写入顺序与您将它们写入CSS文件的顺序相同，因此，如果thead元素只有1行，则第一行同时也是最后一行，并且需要第一个子规则覆盖最后一个孩子。如果不是这样，那么您将使行距上边距有30 px的偏移量，我想这是您不希望的。
位置的一个已知问题：粘性是它不适用于thead元素或表格行：您必须定位到th个元素。跳出此问题将在以后的浏览器版本中解决。
Dav*_*tro 12
最简单的答案仅使用 CSS :D !!!
table {
/* Not required only for visualizing */
border-collapse: collapse;
width: 100%;
}
table thead tr th {
/* you could also change td instead th depending your html code */
background-color: green;
position: sticky;
z-index: 100;
top: 0;
}
td {
/* Not required only for visualizing */
padding: 1em;
}<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</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>david</td>
<td>castro</td>
<td>rocks!</td>
</tr>
</tbody>
</table>我最近遇到了这个问题。不幸的是，我不得不做2张桌子，一张用于标题，另一张用于正文。这可能不是最好的方法，但是可以这样：
<html>
<head>
<title>oh hai</title>
</head>
<body>
<table id="tableHeader">
<tr>
<th style="width:100px; background-color:#CCCCCC">col header</th>
<th style="width:100px; background-color:#CCCCCC">col header</th>
</tr>
</table>
<div style="height:50px; overflow:auto; width:250px">
<table>
<tr>
<td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
<td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
</tr>
<tr>
<td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
<td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
</tr>
</table>
</div>
</body>
</html>这对我有用，可能不是优雅的方法，但是确实有效。我将进行调查，以查看是否可以做得更好，但是它允许使用多个表。
仔细阅读溢出的内容，看看它是否符合您的需求
可能的选择
JS-浮表头
js-floating-table-headers(谷歌代码)
在Drupal
我有一个Drupal 6站点.我在管理员"模块"页面上,注意到这些表具有这个确切的功能!
看一下代码,它似乎是由一个名为的文件实现的tableheader.js.它在类的所有表上应用该功能sticky-enabled.
对于Drupal站点,我希望能够按tableheader.js原样使用该模块用于用户内容.tableheader.js似乎没有出现在Drupal的用户内容页面上.我发布了一条论坛消息,询问如何修改Drupal主题,以便它可用.根据回复,tableheader.js可以在主题中添加到Drupal主题drupal_add_js()中template.php,如下所示:
drupal_add_js('misc/tableheader.js', 'core');