myfaces-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From CL <emailismyl...@yahoo.com>
Subject Re: html table with fixed headers and scrollable rows?
Date Tue, 05 Feb 2008 23:42:04 GMT
What eventually worked for me is something like this:


<table>
              <tbody>
              <tr>
              <td>
              <t:div>
              <t:div>
                <!-- First output only the headers without any rows -->
             <t:dataTable id="table1" other attributes> 
                    <t:column >
                        <f:facet name="header">
                                <h:outputText value="Column 1" />
                            </t:commandSortHeader>
                        </f:facet>
                    </t:column>

                    <t:column >

                        <f:facet name="header">

                                <h:outputText value="Column 2" />

                            </t:commandSortHeader>

                        </f:facet>

                    </t:column>

                    <t:column >

                        <f:facet name="header">

                                <h:outputText value="Column 3" />

                            </t:commandSortHeader>

                        </f:facet>

                    </t:column>

                </t:dataTable>
                </t:div>
                    
                <!-- Create a scrollable div tag -->
                <t:div style="overflow:auto;height:100px">

                <!-- Now output only the rows without the headers -->
             <t:dataTable id="table2" other attributes for data and variable binding etc>
                    <t:column >
                        <h:outputText value="#{var.col1}" />
                    </t:column>
                    <t:column >

                        <h:outputText value="#{var.col2}" />

                    </t:column>
                    <t:column >

                        <h:outputText value="#{var.col3}" />

                    </t:column>

                </t:dataTable>
                </t:div>
                </t:div>
                </td>
                </tr>
                </tbody>
                </table>

(Note: this solution requires more fine tuning as the column widths in
the headers table and the rows tables will not match by default. You
may want to set them to equal width so that they align.)


Hope this helps y'all.

----- Original Message ----
From: Grant Smith <work.grant@gmail.com>
To: MyFaces Discussion <users@myfaces.apache.org>
Sent: Monday, February 4, 2008 6:45:54 PM
Subject: Re: html table with fixed headers and scrollable rows?


Yes,

use the following CSS:

div.tableContainer {
    clear: both;
    border: 1px solid #963;
    height: 505px;
    overflow: hidden;
    width: 976px
}

div.tableContainer thead tr {

    position: relative;
    display: block;
    width: 960px;
}

div.tableContainer tbody {
    display: block;
    height: 450px;
    overflow: auto;
    width: 976px;
}

Then wrap your datatable in a div, like this:



<div id="tableContainer" class="tableContainer">
   <t:dataTable.....>
        <t:column style="width:60px; padding-left: 3px;" headerstyle="width:60px;">

    </t:dataTable>
</div>

Note the style on the column is just an example. the left padding is quite important because
the scrollbar pushes your content inwards and then it doesn't quite line up with the headings.
I couldn't find any easier way than this.

   

On Feb 4, 2008 12:16 PM, CL <emailismylife@yahoo.com> wrote:

Hi All,

Is there a way for tomahawk data tables to get fixed headers and scrollable rows like the
one shown at this URL: 


http://www.imaputz.com/cssStuff/bigFourVersion.html#
or at 
http://www.cssplay.co.uk/menu/tablescroll.html


Any help is appreciated. Thanks.












      Never miss a thing.   Make Yahoo your homepage.







-- 
Grant Smith







      ____________________________________________________________________________________
Never miss a thing.  Make Yahoo your home page. 
http://www.yahoo.com/r/hs
Mime
View raw message