HTML 电子表格固定标题和最左边的列

标签 html css tabular

我正在尝试创建一个类似于 Google Docs 电子表格或 Excel 的电子表格,其中您有一个充满数据的表格。当我垂直滚动时,第一行保持固定,当用户水平滚动时,第一列保持固定,我该怎么做?我不是在寻找插件,这是如何使用 HTML/CSS 完成的?我一直在查看 Google Docs 电子表格的代码,但无法确定解决方案。有人可以为此提供一个简单的例子吗?

例如:

jsFiddle:http://jsfiddle.net/tYUwd/2/

在 jsFiddle 中,当您水平滚动时,我希望固定 .row-header 元素。当您垂直滚动时,.column-headers 将被修复。

最佳答案

我相当确定目前仅使用 HTML/CSS 无法做到这一点。你可以只用 HTMl/CSS 做一个固定的标题或一个伪固定的第一列,但你需要 JavaScript 来让两者一起工作。我建议查看此站点:http://www.8164.org/the-big-table-issue/

我还建议检查这两种可能的解决方案: http://cross-browser.com/x/examples/xtable.php http://www.disconova.com/open_source/files/freezepanes.htm

我以前使用过卡住 Pane 解决方案,效果很好。

关于HTML 电子表格固定标题和最左边的列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7618595/

相关文章:

html - IE8 Wordpress 网站兼容性问题 - 侧边栏显示在页面底部

c# - Application.DoEvents 内存泄漏?

Flexbox 中的 HTML5 视频高度错误

css - Flexbox 垂直对齐到父元素的中间

javascript - Vue Router 从子节点链接子节点

html - 在网页中呈现表格数据的简单方法(如 Google 电子表格)

html - 具有 2 个可变高度列的布局

python - python中有没有从文件中读取表的包

javascript - 使用 React 为同一对象的多个实例动态创建网页

jquery - 如何使用 jQuery 在多选中切换选项的选择?