使表格具有垂直滚动的固定标题和水平滚动的滚动标题的最低要求是什么？

Question

使表格具有垂直滚动的固定标题和水平滚动的滚动标题的最低要求是什么？

我正在尝试使用基本的 HTML/CSS 表完成以下操作：

• 包含动态生成内容的表格，因此单元格的大小应适合内容（而不是固定宽度的单元格）。

• 表格应该是容纳单元格所需的任何大小。表格将比其容器宽，而且很可能比屏幕宽。它不应该溢出它的容器，而是可以水平滚动。

• 表格将位于具有绝对位置 0,0,0,0 的容器内，以使其与其父容器的大小相同（即 position:relative）。

• 当内容过多而无法水平放置时，应该会出现一个水平滚动条，该滚动条会随着表头左右滚动表格。

• 当行数过多时，应垂直出现滚动条，但滚动时，标题行不应垂直滚动，应保持可见。

有一些 Jquery 插件可以为表格添加大量功能集，包括这种类型的滚动。不幸的是，我不想要/不需要一个完整的表格到网格插件，我只需要了解实现 垂直滚动的固定标题 和 所需的基本 css 规则水平滚动的滚动标题。

这是来自插件演示页面的示例：http://www.tablefixedheader.com/fullpagedemo/。这里的滚动按我想要的方式工作，但它似乎使用固定宽度，我不知道这是否需要，或者 javascript 是否正在计算这些宽度等。

具体来说，我正在寻找的是能够解释必要的（并且只有必要的）标记和 css 规则的人，这些规则是按照上述方式制作普通旧表格滚动所需的。我想了解这些规则如何以及为何起作用。

一个理想的答案是几行 HTML 显示哪些内容必须包含在 div 等中，几行 CSS 仅显示使其工作的关键规则，然后解释这些关键规则是什么努力使之成为可能。

我已经尝试使该功能运行 3 天了，并且只能使某些部分正常工作，但不能同时工作。

Answer 1

从本质上讲，滚动的不是表格，而是持有表格的 div 进行滚动。我们来看一些示例代码：

<div style="height:200px; overflow-y: scroll;">
  <table>
   ....
  </table>
</div>

一旦表格达到限制，在 200px 范围的 div 中容纳的数据过多，它将自动启动带有元素 overflow-y 的滚动条。现在，要获得将用于水平和垂直滚动的滚动条，您可以从overflow-y: scroll 切换到overflow: scroll;。我从以下堆栈question 中引用了它。

最后一部分，创建一个固定的header，我们可以参考下面的JsFiddle：

DEMO

这又是从不同的堆栈question 引用的。这样做的关键部分是使用两个表来表示一个大表。这是将第一个表放在第二个表的顶部，然后启用 table-layout: fixed 将所有内容放在一起。

真正的问题出现在您尝试让表格水平滚动时，这可能需要 JQuery 或一些 JS 衍生产品，所以这里有一个很好的堆栈question 可以为您指明正确的方向。

最后我要讲的是表格和 divs/uls/lis 之间的优化差异（我们可以称它为 DUL 以保持简短）。为了更好地理解我的意思，请查看最后的堆栈question。这可能与您有关，也可能与您无关，老实说，这取决于您对更改布局的舒适程度，以及您是否觉得有必要尝试和优化结果。您可能根本不需要它，但同样需要考虑。