• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Fixed Header Datatable

 
Ranch Hand
Posts: 72
Eclipse IDE Firefox Browser Suse
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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:

 
Greenhorn
Posts: 12
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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>
</t:panelGrid>

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

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

</h:outputLink>

</t:column>

<t:column width="250px">

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

</t:dataTable>

</div>

This create a table 300X350 with a scrollable data table
 
reply
    Bookmark Topic Watch Topic
  • New Topic