HTML 电子表格固定标题和最左边的列
我正在尝试创建一个类似于 Google Docs 电子表格或 Excel 的电子表格，其中有一个充满数据的表格。如何做到当我垂直滚动时，第一行保持固定，当用户水平滚动时，第一列保持固定？我不是在寻找插件，只是如何使用 HTML/CSS 来完成此操作？我一直在查看 Google 文档电子表格的代码，但无法确定解决方案。有人可以为此提供一个简单的例子吗？
例如：
jsFiddle: http://jsfiddle.net/tYUwd/2/ < /code>
在 jsFiddle 中，当您水平滚动时，我希望修复 .row-header 元素。当您垂直滚动时，.column-headers 将被修复。
I'm trying to create a spreadsheet similar to Google Docs Spreadsheet or Excel where you have a table full of data. How do I make it so when I scroll vertically, the first row stays fixed and when the user scrolls horizontally, the first column stays fixed? I'm not looking for a plugin, just how is this done using HTML/CSS? I've been looking at the code for Google Docs Spreadsheet, but I'm unable to pinpoint the solution. Can someone provide a simple example for this?
For example:
jsFiddle: http://jsfiddle.net/tYUwd/2/
In the jsFiddle, when you scroll horizontally, I'd like .row-header elements to be fixed. When you scroll vertically, .column-headers are to be fixed.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我相当确定目前仅使用 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
我以前使用过冻结窗格解决方案，效果很好。
I'm fairly certain this cannot currently be done with only HTML/CSS. You can do a fixed header or a pseudo fixed first column with just HTMl/CSS, but you need JavaScript to get both working together. I would suggest checking out this site: http://www.8164.org/the-big-table-issue/
I would also suggest checking out these two possible solutions:
http://cross-browser.com/x/examples/xtable.php
http://www.disconova.com/open_source/files/freezepanes.htm
I've used the Freeze Panes solution before and it works great.