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



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

我正试图用一个基本的HTML/CSS表来完成以下任务:

  • 包含动态生成内容的表,因此单元格的大小应符合内容所需的大小(而不是固定宽度的单元格)。

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

  • 该表将位于一个具有绝对位置0,0,0,0的容器内,使其成为其父容器的大小(即位置:相对)。

  • 当内容太多而无法水平放置时,应显示一个水平滚动条,用其标题左右滚动表格。

  • 当行数过多时,滚动条应垂直显示,但滚动时,标题行不应垂直滚动,应保持可见。

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

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

具体来说,我要找的是能够解释必要的(也是唯一必要的)标记和css规则的人,这些规则是以上述方式滚动普通旧表所需的。我想了解这些规则是如何运作的以及为什么运作的。

一个理想的答案是几行HTML,显示哪些东西必须封装在div中,等等,几行CSS,只显示使其工作的关键规则,然后解释这些关键规则是如何使其成为可能的。

我已经试着让功能工作了3天,只能让某些部分工作,但不能同时让所有部分工作。

从本质上讲,滚动的不是表,而是保存表的div。让我们来看看一些示例代码:

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

一旦表格达到200像素范围的div中有太多数据无法保存的限制,它将自动启动带有元素overflow-y的滚动条。现在,要获得用于水平和垂直滚动的滚动条,请从overflow-y: scroll切换到overflow: scroll;。我在下面的堆栈问题中引用了这一点。

对于最后一部分,创建一个固定的头,我们可以参考以下JsFiddle:

演示

这也是从另一个堆栈问题中引用的。其中的关键部分是使用两个表来表示一个大表。这是将第一个表放在第二个表的顶部,然后使table-layout: fixed能够将所有内容保持在一起。

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

我想介绍的最后一件事是优化表和divs/uls/lis之间的差异(我们可以称之为DUL以保持简短)。为了更好地理解我的确切意思,请看最后一个堆栈问题。这可能与你有关,也可能与你无关,老实说,这取决于你对改变布局的舒适程度,以及你是否觉得有必要尝试并优化结果。你可能根本不需要它,但还是要考虑一下。

最新更新