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屋！