使第一列固定,下一列可在html表中滚动

时间:2012-08-05 11:04:44

标签: html css html5 css3

我有一个只有两列的表。我想使第一列是固定的,下一列可以在所有行中滚动。它应该可以整体水平滚动..不是单独的列

可能有数百行。 。

我在Jsfiddle

中有一个演示代码

我没有太多的css样式。

5 个答案:

答案 0 :(得分:3)

您可以使用CSS overflow:auto;,如http://jsfiddle.net/Yw679/2/

如果我理解正确,您希望整个左列是静态的,并且整个右列(包括标题)可以水平滚动。这是对的吗?

如果是这样,一张桌子就不可能。但是有了一些额外的代码,就可以使用这样的两个表:http://jsfiddle.net/Yw679/6/

答案 1 :(得分:3)

您要搜索的内容称为“冻结列”

查看在版本 4.3 中实现列冻结的jqGrid demo here。它是一个非常通用的网格插件,绝对值得一试(如果你还没有,那就是)。

答案 2 :(得分:0)

你可以这样做:

http://jsfiddle.net/Yw679/3/

th{
  display :inline-block;
  height: 50px;
  width: 100px;
  overflow: scroll;
}

th:first-child{
  overflow: hidden;
}

答案 3 :(得分:0)

答案 4 :(得分:0)

最好将单个表与固定的两列一起使用,而其他列则可以滚动。

Here is the link