如何在不使用 Javascript 的情况下制作比屏幕宽的固定标题、固定宽度、可滚动表格?

发布于 2024-11-01 20:32:55 字数 614 浏览 9 评论 0原文

尽管已经被问过很多次,但还没有找到任何令人满意的解决这个特定问题的方法。我找到了一个可能的解决方案,但它需要垂直滚动条移动到屏幕的左侧。不理想,但在我的特定情况下工作正常。请不要评论这是一个坏主意,除非您有一个满足我其余要求的特定解决方案。

以下是我的问题的具体情况:

  • 仅限 HTML / CSS - 有大量数据,而且我发现 JavaScript 滚动速度太慢且无响应。只要不是对所有数据行进行操作,Javascript 就可以用于一次性格式化操作。
  • 必须能够在标题保持固定的情况下上下滚动行。
  • 每列的宽度应固定
  • 垂直和水平滚动条应可见

问题示例:此表执行所有操作我需要除了一个问题 - 如果不水平滚动,垂直滚动条是不可见的。

当前解决方案:这解决了我的具体问题,但我认为它并不适合所有人。还有更好的解决方案吗?

<代码>

Haven't found anything satisfactory for this particular problem, although it has been asked many times. I've found a possible solution, but it requires the vertical scroll bar to move to the left hand side of the screen. Not ideal, but works fine in my specific case. Please, no comments on this being a bad idea unless you have a specific solution that fulfils the rest of my requirements.

Here are the specifics for my problem:

  • HTML / CSS only - there is a lot of data and the JavaScript scrolling that I've found are much too slow and unresponsive. Javascript can be used for one time formatting operations as long as it's not operating on all the data rows.
  • Must be able to scroll rows up and down while headers remain fixed.
  • Width of each column should be fixed
  • Vertical and horizontal scroll bars should be visible

Problem Example: This table does everything I need except for one issue - the vertical scroll bar is not visible without scrolling horizontally.

Current Solution: This solves my specific problem, but I don't think it will work for everyone. Any better solutions?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

浅听莫相离 2024-11-08 20:32:55

这是一个适合您的纯 CSS 跨浏览器支持解决方案:

带有固定标题的纯 CSS 可滚动表格

您还可以访问此堆栈溢出线程:

具有固定的 HTML 表标题?

This is a pure css cross browser support solution for you :

Pure CSS Scrollable Table with Fixed Header

you can also visit this stack overflow thread :

HTML table with fixed headers?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文