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

标签 javascript html css

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

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

我已经尝试了很多,每次我都停留在表格标题单元格和表格行单元格未对齐的同一点。

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

当然,他们都修复了标题。但我仍然有对齐问题。

您有什么建议吗? 我是 html 和 css 的初学者,如有任何帮助,我们将不胜感激。

提前致谢!

最佳答案

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

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

否则你将需要:

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

另外,似乎没有一个解决方案可以解决这个问题。我发现编写自定义解决方案总是比尝试武装现有的通用插件来做我需要的更好。

关于javascript - 带有固定标题的巨大 HTML 表格,标题单元格和行单元格之间对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9996787/

相关文章:

css - 在 HTML 文件中存储图像是否有效?

javascript - chrome api - 将选项卡移出窗口

javascript - 如何根据年龄或创建日期删除mongodb集合?

javascript - 有没有办法用 JavaScript 中的移位器来增加或减少数字?

html - 使用 <object> 标签包含 HTML 内容 : allowed format of included file

jquery - 越来越奇怪的幻影水平滚动条......什么?

javascript - 如何使用正则表达式将字符串 "folder/lower-case-with-dash"转换为 "folderLowerCaseWithDash"(即驼峰格式)?

javascript - 使 div 类随页面向下 float 的问题

javascript - 将表单元格值用于 javascript 而不是 <td class>

html - 选择框 : Using html elements in options values