• Post Reply Bookmark Topic Watch Topic
  • New Topic

Fixed Header Datatable  RSS feed

Janardan Kelkar
Ranch Hand
Posts: 72
Eclipse IDE Firefox Browser Suse
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi all,
I am trying to implement a datatable having a lot of columns (resulting in a very wide table) and also a lot of rows. I am enclosing this table inside a div tag that limits the height and width of the table and displays horizontal and vertical scroll bars in case of an overflow.
I want the header row of the table to stay fixed when scrolling horizontally, but not vertically. I used the following CSS styleClass

to achieve this, but what i got is the header spilling out of the div tag and getting displayed in its entire width. How can i remove this flaw?

My div tag is as follows:

Joe ONeil
Posts: 12
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
<!--Header you have to experiment with the sizes it will not be exact-->

<t:panelGrid columns="2" bgcolor="#a8b8cf"
style="font-size: 11px; width: 350px; font-weight: bold;">
<t:outputLabel value="Column1"
style="width: 100px; align: center;" styleClass="headerText"></t:outputLabel>
<t:outputLabel value="Column2"
style="width: 232px; align: center;" styleClass="headerText"></t:outputLabel>

<div style="height: 300px; width: 350px; overflow: auto">
<t:dataTable id="table" renderedIfEmpty="false" cellpadding="2"
width="100%" cellspacing="1" var="List"
binding="#{SearchHandler.myDataTable}" rows="0"
rowClasses="row1, row2" headerClass="headerText"
footerClass="footerText" preserveDataModel="false"
preserveSort="false" border="1" styleClass="searchBox">

<t:column width="100px">
<t:outputText value="#{List.col1}" />



<t:column width="250px">

<t:outputText id="ad" value="#{List.col2}" />



This create a table 300X350 with a scrollable data table
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!