我希望能够“调整”一个HTML表格的演示文稿添加一个单一的功能：通过页面滚动下来的时候，这样的表是在屏幕上，但标题行是关闭屏幕，我想的头留在观看区域的顶部可见。
这将是概念上像Excel中的“冻结窗格”功能。然而，一个HTML页面可能包含在这几个表，我只希望它发生针对目前在视图中，只有当它在视图表。
注：我已经看到了一个解决方案，而头不滚动表数据区域是由滚动。这不是我要找的解决方案。
退房jQuery.floatThead（演示可用），这是非常酷的，可以与DataTables工作过，甚至还可以在overflow: auto容器内工作。
你所做的proof of concept是伟大的！不过我也发现this jQuery plugin这似乎是工作得很好。希望能帮助到你！
这是令人沮丧的是什么在一个浏览器的伟大工程，没有在别人打工。在Firefox下工作，但不能在Chrome或IE浏览器：
<table width="80%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody style="height:50px; overflow:auto">
<tr>
<td>Cell A1</td>
<td>Cell B1</td>
<td>Cell C1</td>
</tr>
<tr>
<td>Cell A2</td>
<td>Cell B2</td>
<td>Cell C2</td>
</tr>
<tr>
<td>Cell A3</td>
<td>Cell B3</td>
<td>Cell C3</td>
</tr>
</tbody>
</table>
我已经使用jQuery取得证据的概念的解决方案。
现在我有一个Mercurial bitbucket repository此代码。主文件是tables.html。
我知道这一个问题：如果表包含锚，如果打开网址在浏览器中指定的锚，在页面加载时，与锚的行可能会被通过浮动头遮蔽。
更新二〇一七年十二月一十一日：我看这不符合当前的Firefox（57）和Chrome（63）工作。不知道什么时候，为什么这个停止工作，或如何解决它。但现在，我觉得accepted answer by Hendy Irawan优越。
克雷格，我提炼你的代码位（其中它现在使用位置的一些其他的东西：固定的），并把它包作为一个jQuery插件。
如果你的目标的现代CSS3兼容的浏览器（浏览器支持：https://caniuse.com/#feat=css-sticky），可以使用position:sticky，不需要JS，也不会打破同一列的表格布局小姐对准th和td。它也不需要固定的列宽才能正常工作。
例如，对于一个单一的标题行：
thead th
{
position: sticky;
top: 0px;
}
对于具有1个或2行theads，你可以使用这样的事情：
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 */
}
您可能需要玩了一下与过去的孩子改变的像素数相匹配的第一行的高度的顶级物业（+保证金+边框+填充，如果有的话），所以第二排枝刚下来波纹管的第一个。
另外两个解决方案的工作，即使你有在同一页面中的多个表：每个人的th元素开始被粘在它的顶部位置是一个指示到CSS定义，只是消失的时候所有的表向下滚动。因此，如果有更多的表都做工精美，以同样的方式。
为什么要在CSS使用前最后一儿童和一孩子？
由于CSS规则是由浏览器以相同的顺序呈现为你写他们到CSS文件也正因为如此，如果你只有1行，在THEAD元素的第一行同时是最后一排也和第一胎规则需要覆盖最后一个孩子。如果没有，你将不得不从上缘，我想你不想行30像素的偏移。
的位置的已知问题：粘的是，它并没有在THEAD元素或表中的行工作：你必须针对th元素。跳频这个问题将在未来版本的浏览器来解决。
可能的选择
JS-浮表头
js-floating-table-headers（谷歌代码）
在Drupal
我有一个Drupal第6位。我是管理员“模块”页面，并注意到表格有这个确切的功能！
看代码，它似乎是由一个名为tableheader.js文件来实现。它适用于与类sticky-enabled所有表的功能。
对于Drupal站点，我希望能够利用该tableheader.js模块，为用户的内容。 tableheader.js似乎并不存在于Drupal的用户内容的网页。我发布了forum message问如何修改Drupal主题所以它的使用。根据响应，tableheader.js可以在主题的drupal_add_js()使用template.php如下添加到Drupal主题：
drupal_add_js('misc/tableheader.js', 'core');
我最近遇到了这个问题。不幸的是，我不得不这样做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>这个工作对我来说，这可能不是优雅的方式，但它确实工作。我会进行调查，以便看看我可以做更好的东西，但它允许多个表。
去阅读的overflow礼，看它是否符合您的需要
这是真的对你的表粘头一件棘手的事情。我有同样的要求，但与ASP：GridView控件，然后我发现它真的认为对gridview的粘头。有很多可用的解决方案，它花了我3天尝试所有的解决方案，但没有一个人能满足。
我面临着大多数解决方案的主要问题是定位问题。当你试图让头浮，头细胞和体细胞的某种方式排列下车的轨道。
有了一些解决方案，我也得到了越来越头的问题重叠体的前几排，造成身体越来越行隐藏浮动头后面。
所以现在我必须实现我自己的逻辑来实现这一点，虽然我也没有认为这是完美的解决方案，但是，这也可能是别人有帮助，
下面是示例表。
<div class="table-holder">
<table id="MyTable" cellpadding="4" cellspacing="0" border="1px" class="customerTable">
<thead>
<tr><th>ID</th><th>First Name</th><th>Last Name</th><th>DOB</th><th>Place</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Customer1</td><td>LastName</td><td>1-1-1</td><td>SUN</td></tr>
<tr><td>2</td><td>Customer2</td><td>LastName</td><td>2-2-2</td><td>Earth</td></tr>
<tr><td>3</td><td>Customer3</td><td>LastName</td><td>3-3-3</td><td>Mars</td></tr>
<tr><td>4</td><td>Customer4</td><td>LastName</td><td>4-4-4</td><td>Venus</td></tr>
<tr><td>5</td><td>Customer5</td><td>LastName</td><td>5-5-5</td><td>Saturn</td></tr>
<tr><td>6</td><td>Customer6</td><td>LastName</td><td>6-6-6</td><td>Jupitor</td></tr>
<tr><td>7</td><td>Customer7</td><td>LastName</td><td>7-7-7</td><td>Mercury</td></tr>
<tr><td>8</td><td>Customer8</td><td>LastName</td><td>8-8-8</td><td>Moon</td></tr>
<tr><td>9</td><td>Customer9</td><td>LastName</td><td>9-9-9</td><td>Uranus</td></tr>
<tr><td>10</td><td>Customer10</td><td>LastName</td><td>10-10-10</td><td>Neptune</td></tr>
</tbody>
</table>
</div>
注：表中被包裹与类一DIV属性等于“表保持器”。
下面是我在我的HTML页面标题添加的jQuery脚本。
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//create var for table holder
var originalTableHolder = $(".table-holder");
// set the table holder's with
originalTableHolder.width($('table', originalTableHolder).width() + 17);
// Create a clone of table holder DIV
var clonedtableHolder = originalTableHolder.clone();
// Calculate height of all header rows.
var headerHeight = 0;
$('thead', originalTableHolder).each(function (index, element) {
headerHeight = headerHeight + $(element).height();
});
// Set the position of cloned table so that cloned table overlapped the original
clonedtableHolder.css('position', 'relative');
clonedtableHolder.css('top', headerHeight + 'px');
// Set the height of cloned header equal to header height only so that body is not visible of cloned header
clonedtableHolder.height(headerHeight);
clonedtableHolder.css('overflow', 'hidden');
// reset the ID attribute of each element in cloned table
$('*', clonedtableHolder).each(function (index, element) {
if ($(element).attr('id')) {
$(element).attr('id', $(element).attr('id') + '_Cloned');
}
});
originalTableHolder.css('border-bottom', '1px solid #aaa');
// Place the cloned table holder before original one
originalTableHolder.before(clonedtableHolder);
});
</script>
并低于去年是着色目的位的CSS类。
.table-holder
{
height:200px;
overflow:auto;
border-width:0px;
}
.customerTable thead
{
background: #4b6c9e;
color:White;
}
所以这个逻辑的整体思路是将表放入一个表支架格，并在客户端创建一个持有人的克隆加载页面时。现在隐藏表体克隆仓内，其余头部分在定位到原始标题。
同样的解决方案也适用于ASP：GridView控件，您需要添加两个步骤在GridView中实现这一点，
if (this.HeaderRow != null)
{
this.HeaderRow.TableSection = TableRowSection.TableHeader;
}
<div class="table-holder"></div>。注意：如果你的头有可点击的控制，那么你可能需要添加一些jQuery脚本通过在克隆头提升到原来的报头的事件。此代码是在jQuery的粘头插件通过jmosbech创建已有
在display: fixed部分使用thead应该工作，但它只是在查看当前工作表中，您将需要的JavaScript的帮助。这将是棘手，因为它需要找出相对视，这是浏览器不兼容的主要领域之一滚动地方和元素的位置。
看看流行的JavaScript框架（jQuery的，MooTools的，YUI，等等等等），看看他们是否可以做你想做的，或使其更容易做你想要什么。
如果您使用的是全屏幕表你是在设置日至显示有兴趣的可能：固定的;和顶部：0;或尝试通过CSS的一个非常类似的方法。
更新
只要迅速建立与I帧（HTML4.0）一个可行的解决方案。这个例子是不是标准接轨，然而，你将能够轻松地解决这个问题：
outer.html
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Outer</title>
<body>
<iframe src="test.html" width="200" height="100"></iframe>
</body>
</html>
的test.html
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Floating</title>
<style type="text/css">
.content{
position:relative;
}
thead{
background-color:red;
position:fixed;
top:0;
}
</style>
<body>
<div class="content">
<table>
<thead>
<tr class="top"><td>Title</td></tr>
</head>
<tbody>
<tr><td>a</td></tr>
<tr><td>b</td></tr>
<tr><td>c</td></tr>
<tr><td>d</td></tr>
<tr><td>e</td></tr>
<tr><td>e</td></tr>
<tr><td>e</td></tr>
<tr><td>e</td></tr>
<tr><td>e</td></tr>
<tr><td>e</td></tr>
</tbody>
</table>
</div>
</body>
</html>