我已经尝试了几种方法从HTML表中获取带有固定标题但没有运气的滚动条。我想我需要一个解决方案，其中标题以某种方式“附加”到表体（而不是典型的嵌套表解决方案）。我尝试的每个解决方案都会影响标题列和正文列的宽度。换句话说，它们不同步，并且标题的列与滚动表的列不正确对齐。标题和列的宽度因列而异。
我有什么方法可以达到这个目的吗？我宁愿不使用JavaScript。哦，我也需要这个在Internet Explorer中工作。
更新：获得此功能对我来说非常重要。我需要 列和行标题的固定标头。到目前为止，还没有任何解决方我考虑将标题分开表格，但滚动时这不起作用，因为标题会保持不变。
似乎固定HTML标题会有很多用例，所以我很惊讶没有足够的解决方案。
（哦，我在链接中尝试了opatut建议的选项，但它并不适用于所有浏览器，我需要在Internet Explorer，Firefox和Chrome中使用此工作。如果它在Internet Explorer 6中不起作用没关系。）
哦，如果我必须修改列宽或行高，那也没关系，我很乐意有一个可用的固定标题HTML表（跨浏览器）。
答案 0 :(得分：11)
我有一个纯CSS解决方案的解决方案，允许表格正常且可变宽度。这是一个新的解决方案，根据标题的设计有一些问题。好消息是，如果您的标题是左对齐的，或者您的列是固定宽度的，那么应该没问题。在IE6中有一些视觉错误，我发现一些单元格需要一个最小宽度来保持标题显示列中的内容是否比标题宽。所有问题都是可视的，所以如果看起来不错，你就完成了。表格主体是完全正常的，因为没有JavaScript，所以如果用户重新调整页面大小，则不必执行任何操作。
查看我的解决方案并给我留言 http://salzerdesign.com/blog/?p=191
答案 1 :(得分：5)
我知道你正试图避免使用Javascript，但我和你在同一条船上（在新应用程序的确切挑战中挣扎了几天）并且在大约10分钟内解决了问题发现数据表：
解决方案的工作示例：http://www.datatables.net/examples/basic_init/scroll_y.html
每次都会以宽度方式匹配标题和正文列。宽度可以指定，但它也足够智能自动调整大小。默认情况下，使用提供的示例CSS支持列突出显示和排序。切换到分页模型（我最终使用的）是一行代码。并且......最好的部分 - 如果您担心您的用户可能没有打开Javascript，它会完全降级到符合标准的HTML表格。恕我直言，这是最不痛苦，功能最丰富的解决方案，完全支持IE。
如果它让你感觉更好，我在政府（军事）网站和国际银行的网站上都使用了这个解决方案......我遇到的最苛刻和最严格的客户......两人都对结果非常满意。
答案 2 :(得分：2)
我的第一个回答并未尝试修复两个标题和列。这是一个应该适用于所有典型浏览器的示例（但可能需要进行一些调整）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style>
th { text-align: center; border: 1px solid black; padding:3px; }
td { text-align: center; border: 1px solid black; padding:3px; }
th.c1, td.c1 { width: 100px; }
th.c2, td.c2 { width: 150px; }
th.c3, td.c3 { width: 60px; }
th.c4, td.c4 { width: 100px; }
th.c5, td.c5 { width: 150px; }
th.c6, td.c6 { width: 60px; }
#rowScroll { height: 100px; } /* Subtract the scrollbar height */
#contentScroll { height: 100px; width: 300px; }
#colScroll { width: 272px; } /* Subtract the scrollbar width */
</style>
<table cellspacing="0" cellpadding="0" style="float: left;" style="width:300px; height:100px;" >
<tr>
<td id="void" style="border: 0;">
</td>
<td id="rowHeaders" style="border: 0;">
<div id="colScroll" style="overflow-x:hidden;">
<table cellspacing="0" cellpadding="0" style="width: 600px;">
<tr>
<th class="c1">A</th>
<th class="c2">B</th>
<th class="c3">C</th>
<th class="c4">D</th>
<th class="c5">E</th>
<th class="c6">F</th>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td id="colHeaders" style="border: 0;">
<div id="rowScroll" style="overflow-y:hidden">
<table cellspacing="0" cellpadding="0">
<tr><td>R1</td></tr>
<tr><td>R2</td></tr>
<tr><td>R3</td></tr>
<tr><td>R4</td></tr>
<tr><td>R5</td></tr>
<tr><td>R6</td></tr>
<tr><td>R7</td></tr>
<tr><td>R8</td></tr>
<tr><td>R9</td></tr>
</table>
</div>
</td>
<td id="content" style="border: 0;">
<div id="contentScroll" style="overflow:auto">
<table cellspacing="0" cellpadding="0" style="width: 600px;">
<tr><td class="c1">A1</td><td class="c2">B1</td><td class="c3">C1</td><td class="c4">D1</td><td class="c5">E1</td><td class="c6">F1</td></tr>
<tr><td class="c1">A2</td><td class="c2">B2</td><td class="c3">C2</td><td class="c4">D2</td><td class="c5">E2</td><td class="c6">F2</td></tr>
<tr><td class="c1">A3</td><td class="c2">B3</td><td class="c3">C3</td><td class="c4">D3</td><td class="c5">E3</td><td class="c6">F3</td></tr>
<tr><td class="c1">A4</td><td class="c2">B4</td><td class="c3">C4</td><td class="c4">D4</td><td class="c5">E4</td><td class="c6">F4</td></tr>
<tr><td class="c1">A5</td><td class="c2">B5</td><td class="c3">C5</td><td class="c4">D5</td><td class="c5">E5</td><td class="c6">F5</td></tr>
<tr><td class="c1">A6</td><td class="c2">B6</td><td class="c3">C6</td><td class="c4">D6</td><td class="c5">E6</td><td class="c6">F6</td></tr>
<tr><td class="c1">A7</td><td class="c2">B7</td><td class="c3">C7</td><td class="c4">D7</td><td class="c5">E7</td><td class="c6">F7</td></tr>
<tr><td class="c1">A8</td><td class="c2">B8</td><td class="c3">C8</td><td class="c4">D8</td><td class="c5">E8</td><td class="c6">F8</td></tr>
<tr><td class="c1">A9</td><td class="c2">B9</td><td class="c3">C9</td><td class="c4">D9</td><td class="c5">E9</td><td class="c6">F9</td></tr>
</table>
</div>
</td>
</tr>
</table>
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var content = $("#contentScroll");
var headers = $("#colScroll");
var rows = $("#rowScroll");
content.scroll(function () {
headers.scrollLeft(content.scrollLeft());
rows.scrollTop(content.scrollTop());
});
</script>
</body>
</html>
答案 3 :(得分：2)
尝试我的解决方案，它没有错误并且针对性能进行了优化（不牺牲功能）：
http://code.google.com/p/js-scroll-table-header/
如果您尝试并需要任何帮助，请问，我是作者。
答案 4 :(得分：1)
我发现所有我需要固定的单元格宽度和高度值，所以如果你想让它保持动态，你就会被JavaScript困住。
我喜欢的一个解决方案就是这个，但你需要为每个列定义一个宽度。 » Fixed headers in large HTML tables The Code Project。
如果您不想使用JavaScript，也许可以使用PHP设置固定列宽。我将确定获取列宽的单元格的平均字符串长度：
column_width = column_average / (all_cells_average * column_count) * table_width
答案 5 :(得分：1)
直接放在这里的代码有点太多，但它归结为至少，你需要一些大量的CSS。使用javascript和jQuery可以减轻这一点，因此我将包含两种方法的链接。
您可以使用this page上的来源复制一个示例，说明如何通过CSS和HTML完全按照您的要求执行操作。据报道，这几乎适用于所有当前浏览器（Opera 7.x + (All Platforms), Mozilla 1.x + (All Platforms), IE 6.x + (Windows), Safari 1.x + (MacOS), Konqueror 3.x + (Linux / BSD)），但如果你必须回到IE 5.x，它就会开始失败。
如果您决定开放包含Javascript和jQuery，那么第二个选项看起来更容易实现：this blog article显示了如何。
答案 6 :(得分：0)
您可以在没有JavaScript的情况下使用DataTables。它不会有排序，但托管它们的表，标题和div将起作用。只需查看页面源代码 - 它有3个div，每个div都有一个宽度相同的表格。顶部和底部只提供页眉和页脚，中间的一个提供数据。它实际上非常接近你最初的想法，你需要将这些部分分开。