在 html 中修复 Google Table header

Question

我正在使用 google visualization table 创建一个 html table。我使用 stuckpart div 修复了 html 的顶部，这样无论我如何滚动页面，按钮始终是固定的。现在我还希望 table header 固定在 button 下方。我的布局是这样的：

<div class="stuckpart">
        <button type="button">this button is fixeddddddd</button>
</div>
<div id="table_div"></div>

我得到了这样的东西：http://jsfiddle.net/RjHMH/95/

如您所见，table header 不是固定的。从Firefox可以看出table的headerclass是google-visualization-table-tr-head。无论如何我可以修复这个 header 并滚动浏览 table body?

Answer 1

像这样：

http://jsfiddle.net/RjHMH/119/

我更改了一些奇怪的位置并在实际 table 上添加了高度并将 table 正文设置为滚动。

.stuckpart{
position:fixed;
z-index: 100; /*So easy, if you don't know z-index that mean you sucks*/
}

#table_div{
position:relative;
overflow-y:auto; 
padding-top: 40px;
height:400px;
}
tbody{
overflow-y:scroll;
}

在 html 中修复 Google Table header

fix Google Table header in html

html

javascript

css

jquery

google-visualization