保持頭部固定在數據表中，同時允許其內容滾動

Question

我有一個表頭和數據。當我滾動標題也滾動我的代碼如下：

<div style="height:200px;overflow-x:auto;overflow-y:scroll;"> 
    <h:dataTable cellpadding="0" cellspacing="0" border="0" width="60%" 
     headerClass="HeaderCellSorted" columnClasses="DataCell" rowClasses="OddRow,EvenRow" styleClass="SearchResults" footerClass="FooterCell" 
     id="userListTable" value="#{pc_WorkInProgressUserGrid.userGridModel.rebalanceByUserList}" var="userGridDO"> 
     <h:column id="userNameColumn"> 
      <f:facet name="header"> 
       <h:outputLink id="userNameColumnLink" styleClass="Header" value="#" onclick="refreshUserGrid('DISPLAYNAME')"> 
        <h:outputText id="userNameColID" styleClass="outputText" value="User"/> 

任何建議將有所幫助。

Answer 1

這其實是一件容易的事與CSS：

tbody { 
    height: 200px; /* Just some fixed height */ 
    overflow: scroll; 
} 

但在微軟團隊開發不支持tbody元素的overflow財產一定廣泛使用的網頁瀏覽器。所以你真的被困住了，你需要去面對HTML + CSS和/或基於Javascript的解決方案。

• 谷歌： 「scrollable table with fixed header」
• ＃1： 「scrollable table with fixed header」

有通過也jQuery plugin的方式是。

Answer 2

如果您能夠使用RichFaces，它們提供了具有您正在查找的功能的ExtendedDataTable。見http://livedemo.exadel.com/richfaces-demo/richfaces/extendedDataTable.jsf。