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

【问题标题】：How do I make a fixed header, fixed width, scrollable table which is wider than the screen without using Javascript?如何在不使用 Javascript 的情况下制作比屏幕宽的固定标题、固定宽度、可滚动表格？
【发布时间】：2011-08-06 16:34:43
【问题描述】：

虽然已被多次询问，但仍未找到任何令人满意的解决此特定问题的方法。我找到了一个可能的解决方案，但它需要垂直滚动条移动到屏幕的左侧。不理想，但在我的特定案例中可以正常工作。除非您有满足我其余要求的特定解决方案，否则请不要认为这是一个坏主意。

以下是我的问题的具体细节：

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

Problem Example：这个表格可以满足我的所有需求，除了一个问题——如果不水平滚动，垂直滚动条是不可见的。

Current Solution：这解决了我的具体问题，但我不认为它适用于所有人。有更好的解决方案吗？

【问题讨论】：

标签： html scroll fixed-width fixed-header-tables

【解决方案1】：

这是为您提供的纯 css 跨浏览器支持解决方案：

Pure CSS Scrollable Table with Fixed Header

你也可以访问这个堆栈溢出线程：

HTML table with fixed headers?

【讨论】：

谢谢，但这些解决方案是我创建这篇文章的原因 - 它们都不适用于我的应用程序。一旦表格变得比页面宽，CSS 可滚动表格对我来说效果不佳。 Stack Overflow 线程解决方案（我尝试过）在宽表（至少对于我的应用程序）上也效果不佳。