如何使用CSS冻结帧

时间:2010-12-30 22:05:56

标签: html css

我想创建一个带有可滚动主体的表。我将有我的标题行,然后在标题被修复时将滚动的数据。这有点像excel中的冷冻窗格。我尝试在要滚动的内容上方创建一个表,但列宽不匹配。在我看来,一切都必须在一个表中,以便匹配所有列。最好的方法是什么?

我设置了一个小提琴来展示我正在尝试做的事情。我尝试了很多东西来完成这项工作,但从来没有让它成功。

http://www.jsfiddle.net/polyhedron/pzbmS/2/

3 个答案:

答案 0 :(得分:1)

一切似乎对我来说都很好 - 假设我理解正确。

编辑:对不起 - 我相信您正在寻找其他选择。这些可能会有所帮助

Pure CSS Scrollable Tables

Another similar link...

这是我制作的一个快速而又脏的jsFiddle - 它只使用你提到的1行。

jsFiddle

答案 1 :(得分:1)

我有一个项目,我需要相同的行为。以下是我提出的建议:

http://blog.bobcravens.com/2010/01/html-scrolling-table-with-fixed-headers-jquery-plugin/

以下是最终结果的演示页:

http://bobcravens.com/demos/FixedHeaderTable/index.html

希望这能让你开始。如果您有疑问,请告诉我。

鲍勃

答案 2 :(得分:-1)

将text-align:left添加到thead tr元素:

thead tr
{
 text-align: left;
}