html - 仅冻结 html table的首行( 固定 table 标题滚动)

我想用顶部行冻结(当垂直向下滚动时,总是可以看到它)创建一个html table 。

有没有一种聪明的方法,在没有javascript的情况下实现?

时间:

在最上面一行的

这里有一个例子

Chromatable jquery插件允许一个固定的标头(或第一行),它宽度允许百分比(允许的百分比),仅为100的百分比。

http://www.chromaloop.com/posts/chromatable-jquery-plugin

我无法想象怎么能没有javascript 。

更新:新链接- > http://www.jquery-plugins.info/chromatable-00012248.htm

你可以将两个div用于标题,另一个用于table 。 然后使用


#headings {
 position: fixed;
 top: 0px;
 width: 960px;
}

这只适用于固定宽度列。

根据 Pure CSS Scrollable Table with Fixed Header,我编写了一个DEMO,通过设置overflow:auto来轻松固定header 。


table thead tr{
 display:block;
}

table th,table td{
 width:100px;//fixed width
}


table tbody{
 display:block;
 height:200px;
 overflow:auto;//set tbody to auto
}

...