html表，包含水平和垂直滚动和固定标题以及固定列宽

Question

我有一个我想要的HTML表

1. 垂直滚动
2. 水平滚动
3. 固定标题（不垂直滚动，但水平滚动）
4. 固定列宽 - 即固定表格布局
5. 理想情况下，修复第一列（如冻结窗格）

我的研究表明你不能在纯CSS中这样做，因为典型的策略是为标题创建一个标题div，然后为表数据创建另一个div，然后使用jQuery / javascript来同步滚动标题/表格数据。

我尝试了一些插件，实际上深入研究了这两个插件

http://fixedheadertable.com/

http://www.novasoftware.com/Download/jQuery_FixedTable/JQuery_FixedTable.aspx

但是，这些插件对我不起作用，因为我需要/更喜欢固定列宽而不是自动调整大小。

如果有人解决我的问题，或者可以推荐如何修改固定宽度的插件，我们将不胜感激！

希望我不要求太多！

Answer 1

我认为nova jquery fixedtable很好，它的特点是：

• 允许水平和垂直滚动
• 在一个页面上支持多个具有固定标题和列的HTML表格
• 固定列数可以自定义
• 鼠标过时和退出时每行的背景颜色可以自定义

无论如何，为什么不问他们的开发者。 http://www.novasoftware.com/contactus.aspx

Answer 2

我遇到了同样的问题，并为您的问题提出了轻量级解决方案。我做的是： 我的问题的解决方案是在buildFixedTable中执行此操作： 替换var th = $(1*).appendTo(target); 使用var th = $(2*).appendTo(target);

并将OnRowDataBound="GridView1_RowDataBound"添加到网格定义中 并为此设置了一个受保护的void处理程序，我设置了列宽。

瞧！

1* = (lt)table(gt)(lt)/table(gt)
2* = (lt)table(gt)(lt)col style=width:20%(gt)(lt)col style=width:20%(gt)(lt)col style=width:60%(gt)(lt)/table(gt)

其中

lt = Less_than_sign gt = Greater_than_sign

可能需要对您的实施进行一些测试，但它解决了我的问题......