how to make <display:table> scrollable?

Sweety picture Sweety · Aug 27, 2012 · Viewed 12.1k times · Source

I am using <display:table> tag to display table in jsp page.

now i can navigate records using page numbers.

Now i want display all records in single page but with scrolling.(no pagination)

this table is set as a part of page so like only one div can be scrollable.rest of page should be as it is.

Please suggest..!

Answer

Khanh Tran picture Khanh Tran · Aug 28, 2012

Try to put your table in the div tag then edit the css file:

<div class="displayTableFrame" style="margin-top: 20px; padding-top: 30px;">            
    <display:table cellpadding="5" cellspacing="1" name="myList" class="dataTable">             
        <display:column class="colId" property="id" title="ID" />    
        <display:column class="colName" property="name" />    
        <display:column class="colEmail" property="email" />    
        <display:column class="colStatus" property="status" />    
        <display:column class="colComments" property="description" title="Comments" />                                                                            
    </display:table>    
</div>

For example, the div tag is displayTableFrame. Then css:

.displayTableFrame {
    background-color: green;
    overflow-x: scroll;
    height: 320px
    width: 100%;
}

give it a fixed heigth then overflow-x: scroll. Try and let us know.


Update:
Thanks to Jaimon and his magical codes, the solution for fixed header can be found here:
Jaimon's Blog
I have tested and it works smoothly with IE8 and FF14.


Good luck Ruchi!
Best regards,
Khanh Tran