Question

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

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

包含动态生成内容的表格，因此单元格应该是适合内容所需的大小（不是固定宽度单元格）。
表格应该是容纳细胞所需的任何大小。该表将比其容器宽，并且很可能是屏幕。它不应该溢出容器，而是可以水平滚动。
该表将位于具有绝对位置0,0,0,0的容器内，以使其成为其父容器的大小（位置：相对）。
如果内容太多而无法横向放置，则应显示一个水平滚动条，使用它的标题左右滚动表格。
当行数太多时，滚动条应垂直显示，但滚动时，标题行不应垂直滚动，应保持可见。

有一些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中引用了此内容。

最后一部分，创建一个固定的标题，我们可以引用以下JsFiddle：

DEMO

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

当你试图让你的表水平滚动时，真正的问题出现了，这可能需要JQuery或一些JS衍生物，所以这里有一个很好的堆栈question，可以指向正确的方向。

我想要介绍的最后一件事是表和div / uls / lis之间的优化差异（我们可以称之为DUL以保持简短）。为了更好地了解我的意思，请查看最后一个堆栈question。这可能与您有关，也可能与您不相关，它实际上取决于您更改布局的舒适程度，以及您是否觉得需要尝试优化结果。您可能根本不需要它，但需要考虑的事情。

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

1 个答案: