HTML固定的标题表滚动条 [英] HTML fixed header table scrollbar
问题描述
可能存在重复：
带固定头文件的HTML表格
我试过了有几种方法可以从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.
有什么办法可以达到这个目的？我宁愿不使用JavaScript。哦，我也需要这个在Internet Explorer中工作。
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.
更新：获得此功能对我来说非常重要。我需要 列和行标题的固定标题。到目前为止没有解决方案能够正常工我考虑将头文件分隔开，但滚动时它不起作用，因为头文件会保持不变。
Update: It is pretty important for me to get this functionality. I need the fixed header for both column 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.
好像固定HTML会有很多用例所以我很惊讶没有足够的解决方案。
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.
（哦，我尝试了链接中的opatut建议的选项，但它不起作用在所有的浏览器中，我需要在Internet Explorer，Firefox和Chrome中进行这项工作，如果它在Internet Explorer 6中无法正常工作）。
(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).
哦，如果我必须修正列宽或行高，这也没问题，我只是很高兴有一个工作的固定头HTML表（跨浏览器）。
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).
推荐答案
我有一个解决方案，它是一个纯CSS解决方案，并允许表格为普通和可变宽度。这是一个新的解决方案，并根据您的标题的设计有一些问题。好消息是，如果你的标题是左对齐的，或者你的列是固定宽度的，那应该没问题。在IE6中有一些可视错误，我发现有些单元格需要最小宽度来保持标题，以显示列中的内容是否比标题更宽。所有问题都是可视的，所以如果看起来很好，你就完成了。表格体是完全正常的，因为没有JavaScript，所以如果用户重新调整页面的大小，就不必做任何事情。
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.
查看我的解决方案并离开我评论
http://salzerdesign.com/blog/?p=191
Check out my solution and leave me a comment http://salzerdesign.com/blog/?p=191
这篇关于HTML固定的标题表滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
