带有固定标题的巨大HTML表,标题单元格和行单元格之间的对齐方式

时间:2012-04-03 15:44:26

标签: javascript html css

我需要在网络中表示大量数据(37列,1000 +行)。我想修复此表的标题行,然后相应地操作数据。

网络上有很多可能的解决方案,其中一些依赖于css,一些依赖于javascript。

我已经尝试了很多这些,并且每次我都停留在表头单元格和表格行单元格未对齐的同一点上。

我试过的第一种方式:https://s12-chicago.accountservergroup.com/~gomathik/demos/scroll.html 第二种方式我累了:http://www.imaputz.com/cssStuff/bigFourVersion.html#

他们俩当然修好了标题。但我仍然存在对齐问题。

你有什么建议吗? 我是hgg和css的begginer,任何帮助将不胜感激。

提前谢谢!

2 个答案:

答案 0 :(得分:2)

我有一些经验,我可以给你一些想法/指示:

  • 最简单的方法是将表格样式设置为固定,然后您可以使用css更改列宽,无论内容如何,​​它们都会保持宽度。
  • 在预定义列宽后,您可以将thead克隆到表格上方的另一个表格中,它将像固定标题一样

否则你需要:

  • 将标题的高度设置为0px
  • 将标题克隆到表格上方的表格中
  • 将新标题表的宽度设置为原始表格的宽度
  • 将新表格中每个单元格的外部宽度设置为原始表格中相同标题单元格的外部宽度

另外,这样做的解决方案似乎都没有。我发现编写一个自定义解决方案总是比试图将现有的通用插件与我需要的东西搏斗更好。

答案 1 :(得分:0)

我参与了一个项目,其目标是将大型数据集(10-20列,500多行)以及其他可视化对象可视化为表格。

我使用Google Visualization API Table.使用JavaScript很容易使用和控制(不要吓跑!)。

它非常支持格式化(通过DataTable类)。它实际上使用HTML表格标记和一些额外的JavaScript和CSS。 Table类负责单元格对齐。看看这些例子。