HTML 固定标题表滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3338758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML fixed header table scrollbar
提问by aeq
Possible Duplicate:
HTML table with fixed headers?
可能的重复：
带有固定标题的 HTML 表格？
I've tried several methods to get a scroll bar from an HTML table with a fixed header but had no luck. I think I need a solution where the header is somehow "attached" to the table body (rather than the typical nested table solution). Every solution I tried messes up the width of the header columns and the body columns. In other words they get out of synch and the columns of the header don't line up properly with those of the scrolling table. The widths of the headers and the columns vary from column to column.
我尝试了几种方法来从带有固定标题的 HTML 表中获取滚动条，但没有成功。我想我需要一个解决方案，其中标题以某种方式“附加”到表主体（而不是典型的嵌套表解决方案）。我尝试过的每个解决方案都会弄乱标题列和正文列的宽度。换句话说，它们不同步，标题的列与滚动表的列不正确对齐。标题和列的宽度因列而异。
Is there any way for me to achieve this? I'd rather not use JavaScript. Oh and I need this to work in Internet Explorer as well.
我有什么办法可以实现这一目标吗？我宁愿不使用 JavaScript。哦，我也需要它在 Internet Explorer 中工作。
Update: It is pretty important for me to get this functionality. I need the fixed header for bothcolumn and row headers. So far no solution has worked properly. I considered making the headers separate tables, but this wouldn't work when scrolling since the headers would stay fixed.
更新：获得此功能对我来说非常重要。我需要在固定头两列和行头。到目前为止，没有任何解决方案能够正常工作。我考虑过将标题分开表，但这在滚动时不起作用，因为标题将保持固定。
It seems like there would be many use cases for fixed HTML headers so it is surprising to me that there is no adequate solution.
似乎固定 HTML 标头会有很多用例，所以我很惊讶没有足够的解决方案。
(Oh, and I tried the option suggested by opatut in the link, but it doesn't work in all browsers and I need this work in Internet Explorer, Firefox and Chrome. If it doesn't work in Internet Explorer 6 that's OK).
（哦，我尝试了链接中 opatut 建议的选项，但它不适用于所有浏览器，我需要在 Internet Explorer、Firefox 和 Chrome 中使用此选项。如果它在 Internet Explorer 6 中不起作用，那没关系） .
Oh, and if I must fix the column widths or row heights, that's OK too, I would just be glad to have a working fixed header HTML table (cross-browser).
哦，如果我必须固定列宽或行高，那也没关系，我很高兴有一个工作的固定标题 HTML 表（跨浏览器）。
回答by Miriam Salzer
I have a solution which is a pure CSS solution and allows the table to be normal and variable width. This is a new solution and has some issues depending on the design of your headers. The good news is that if your headers are left-aligned, or your columns are fixed width, it should be fine. There are some visual bugs in IE6, and I've found that some cells need a min-width to keep the headers showing if the content in the column is less wide then the header. All the issues are visual, so if it looks good you're done. The table body is totally normal, and since there's no JavaScript you don't have to do anything if the user re-sizes the page.
我有一个解决方案，它是一个纯 CSS 解决方案，并允许表格为正常宽度和可变宽度。这是一个新的解决方案，根据标题的设计存在一些问题。好消息是，如果您的标题是左对齐的，或者您的列是固定宽度的，那应该没问题。IE6 中存在一些视觉错误，我发现某些单元格需要一个最小宽度来保持标题显示，如果列中的内容宽度小于标题。所有的问题都是视觉上的，所以如果它看起来不错，你就完成了。表格主体是完全正常的，并且由于没有 JavaScript，如果用户重新调整页面大小，您无需执行任何操作。
Check out my solution and leave me a comment http://salzerdesign.com/blog/?p=191
查看我的解决方案并给我留言 http://salzerdesign.com/blog/?p=191
回答by bpeterson76
I know you're trying to avoid Javascript, but I was in exactly the same boat as you (struggling with what to do for days on the exact challenge for a new application) and solved the problem in about 10 minutes once I found Datatables:
我知道您正试图避免使用 Javascript，但我和您处于完全相同的状态（在新应用程序的确切挑战中挣扎了几天要做什么）并在我找到 Datatables 后在大约 10 分钟内解决了这个问题：
Working example of a solution: http://www.datatables.net/examples/basic_init/scroll_y.html
解决方案的工作示例：http: //www.datatables.net/examples/basic_init/scroll_y.html
It EXACTLY matches header and body columns width-wise every time. Widths can be specified, but it's also intelligent enough to auto size. Column highlighting and sorting is supported by default using the provided sample CSS. Switching to a paginated model (what I ended up using) is a single line of code. And....the best part--if you're concerned that your user might not have Javascript turned on, it degrades perfectly back to standards-compliant HTML tables. IMHO, it's the least painful, most feature rich solution out there that fully supports IE.
它每次都完全匹配标题和正文列的宽度。可以指定宽度，但它也足够智能以自动调整大小。默认情况下，使用提供的示例 CSS 支持列突出显示和排序。切换到分页模型（我最终使用的）是一行代码。而且……最好的部分——如果您担心您的用户可能没有打开 Javascript，它会完全降级回符合标准的 HTML 表格。恕我直言，这是完全支持 IE 的最不痛苦、功能最丰富的解决方案。
If it makes you feel any better, I've used this solution on both a government (military) site and an international bank's websites....both the most demanding and strictest customers I've ever come across...and both were extremely happy with the results.
如果它让您感觉好些，我已经在政府（军事）网站和国际银行的网站上使用过这个解决方案......这都是我遇到过的最苛刻和最严格的客户......而且两者都是对结果非常满意。
回答by raveren
Try my solution, it's bug free and optimized for performance (not sacrificing functionality):
试试我的解决方案，它没有错误并且针对性能进行了优化（不牺牲功能）：
http://code.google.com/p/js-scroll-table-header/
http://code.google.com/p/js-scroll-table-header/
If you try it and need any help, just ask, I'm the author.
如果您尝试并需要任何帮助，请询问，我是作者。
回答by John Fisher
My first answer didn't attempt to fix bothheaders and columns. Here's an example that should work in all typical browsers (but it may need some tweaking).
我的第一个答案没有尝试解决这两个标题和列。这是一个应该适用于所有典型浏览器的示例（但可能需要进行一些调整）。
<!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>
回答by opatut
All I've found need fixed values for cell width and height, so if you want to keep it dynamic you're stuck with JavaScript.
我发现的所有单元格宽度和高度都需要固定值，所以如果你想保持动态，你就会被 JavaScript 困住。
One solution I like is this one, but you need to define a width for each colum. » Fixed headers in large HTML tablesat The Code Project.
我喜欢的一个解决方案是这个，但您需要为每个列定义一个宽度。» 修复了The Code Project中大型 HTML 表格中的标题。
If you don't want to use JavaScript, maybe you can set the fixed column widths with PHP. I would determine the average string length of the cells to get the column width:
如果您不想使用 JavaScript，也许您可以使用 PHP 设置固定列宽。我将确定单元格的平均字符串长度以获得列宽：
column_width = column_average / (all_cells_average * column_count) * table_width
回答by Jeffrey Blake
It's a bit too much code to put in here directly, but what it comes down to is, at minimum, you'll need some hefty CSS for this. Using javascript and jQuery can lighten that, so I'll include links to both methods.
直接放在这里的代码有点太多了，但归根结底是，至少，你需要一些大量的 CSS。使用 javascript 和 jQuery 可以减轻这种情况，所以我将包含这两种方法的链接。
HTML + CSS Only
仅 HTML + CSS
You can use the source on this pageto copy an example of how you can do exactly what you're asking via CSS and HTML. This is reported as working in pretty much all current browsers (Opera 7.x + (All Platforms), Mozilla 1.x + (All Platforms), IE 6.x + (Windows), Safari 1.x + (MacOS), Konqueror 3.x + (Linux / BSD)), but if you have to go back to IE 5.x, it starts to fail.
您可以使用此页面上的源代码复制一个示例，说明如何通过 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
Javascript/jQuery
If you decide that you're open to including Javascript and jQuery, there's a second option that looks a bit simpler to implement: this blog articleshows how.
如果您决定对包含 Javascript 和 jQuery 持开放态度，那么还有一个看起来更容易实现的选项：这篇博客文章展示了如何实现。
回答by ZXX
You can use DataTableswithout JavaScript. It won't have sorting but the table, headers and divs that are hosting them will work. Just look at the page source - it has 3 divs each with a table with identical widths in thead. Top and bottom just provide header and footer and the one in the middle provides data. It's actually pretty close to your original idea that you need to heep these parts separated.
您可以在没有 JavaScript 的情况下使用数据表。它不会进行排序，但托管它们的表、标题和 div 将起作用。只需查看页面源代码 - 它有 3 个 div，每个 div 都有一个相同宽度的表格。顶部和底部只提供页眉和页脚，中间的提供数据。这实际上非常接近您最初的想法，您需要将这些部分分开。
