Scroll bar for display table - scroll

Question

I was wondering how to insert a <DIV> tag in between the pagination bar
and the actual TABLE that starts the results display if I have the
pagination bar at the top. If I just put the <DIV> tag right before my
display:table, it also includes the pagination stuff inside the scroll bar.
Also, I cannot figure out how to set the style to TBODY as it is a little bit
confusing. I am not sure if you guys wrote this stuff but can you advise me
if you have any idea how to achieve this.
and my code is
<display:table id="data1" name="invprbmList" requestURI="" pagesize="10" export="true" style="width:100%;" decorator="org.displaytag.decorator.TotalTableDecorator">
<tr><td><display:setProperty name="paging.banner.item_name">Invoice</display:setProperty>
<display:setProperty name="paging.banner.items_name">Invoices</display:setProperty>
<display:setProperty name="paging.banner.some_items_found"><span class="pagebanner"> {0} Invoices found, displaying {2} to {3}. </span></display:setProperty>
<bean:define id="invoiceNo"><bean:write name="data1" property="invoiceNo"/></bean:define>
<bean:define id="notes"><bean:write name="data1" property="notes"/></bean:define>
<bean:define id="strFlag"><bean:write name="data1" property="strFlag"></bean:write></bean:define>
<display:column title="Invoice No." sortable="true" property="invoiceNo" media="xml csv pdf excel" class="l" headerClass="hl" />
<display:column property="invDate" title="Invoice Date" format="{0,date,dd-MMM-yyyy}" sortable="true" class="l" headerClass="hl"/>
<display:column media="html" title="Amount" property="invAmount" format="<%=strDispCurrency %>" sortable="true" class="r" headerClass="hr" />
<display:column title="Amount" sortable="true" property="invAmount" media="xml csv pdf excel" class="r" headerClass="hr" />
<display:column property="dueDate" title="Due Date" format="{0,date,dd-MMM-yyyy}" sortable="true" class="l" headerClass="hl"/>
<display:column media="html" title="Balance" property="balance" format="<%=strDispCurrency %>" sortable="true" class="r" headerClass="hr" />
<display:column title="Balance" sortable="true" property="balance" media="xml csv pdf excel" class="r" headerClass="hr" />
<display:column title="Notes" sortable="true" property="notes" media="xml csv pdf excel" class="c" headerClass="hc"/>
<display:column property="invPoNum" title="P.O. No." sortable="true" class="l" headerClass="hl"/>
<display:column property="invRefNo" title="Ref. No." sortable="true" class="lbr" headerClass="hlbr"/>
<display:column property="status" title="Status" sortable="true" class="l" headerClass="hl"/>
</td></tr>
</display:table>

Answer 1

Create a CSS class locked-column.css as:
div#tbl-container {
width: 740px;
/* default value will be overrided by minimum of table width or screen
resolution*/
height: 300px;
margin-top: -11px;
overflow: auto;
/*
scrollbar-base-color: #ffeaff;
*/
}
.dataTable { /*table-layout: fixed; */
border-collapse: collapse;
/* background-color: WhiteSmoke; */
}
.dataTable th {
top: expression(document . getElementById("tbl-container") . scrollTop-2
); /* IE5+ only */
z-index: 20;
font-size: small;
padding: 5px 5px 5px 5px !important;
text-align: center;
position: relative;
cursor: default;
font-family: sans-serif;
font-size: small;
font-weight: bold;
background-color: #BBCCFF;
color: #FFFFF;
}
.dataTable thead tr {
position: relative;
height: 10px;
/*background-color: #7CA4E0;*/
}
.dataTable th a:link,th a:visited {
color: #1155cc;
font-weight: bold;
text-decoration: none;
font-family: sans-serif;
}
.dataTable a:hover {
color: #1155cc;
text-decoration: underline;
font-family: sans-serif;
font-weight: bold;
}
.dataTable thead th.sorted A {
font-weight: bolder;
}
.dataTable td {
padding: 3px 3px 3px 3px !important;
}
.dataTable tbody tr {
height: auto;
white-space: nowrap;
}
.dataTable tbody tr.odd {
background-color: #FFFFFF;
font-size: x-small;
}
.dataTable tbody tr.tableRowEven,tr.even {
background-color: #DDE5FF;
font-size: x-small;
}
.dataTable tbody tr td:last-child { /* padding-right: 20px; */
}
/*these styles have nothing to do with the locked column*/
.dataTable body {
background-color: white;
color: black;
font-family: sans-serif;
}
.dataTable tbody td {
padding: 2px 4px 2px 4px !important;
font-family: sans-serif;
font-size: x-small;
}
.exportlinks {
font-family: sans-serif;
}
/* style sheet to display light blue color for a mouse on row over event */
.dataTable tr.rowMouseOver {
color: white;
background-repeat: repeat-x;
background-color: rgb(228, 59, 47); /*#8888FF;*/
}
.dataTable .order1 {
background-position: right 50%;
background-image: url('../Images/arrow_up.gif');
background-repeat: no-repeat;
font-weight: bold;
}
.dataTable .order2 {
background-position: right 50%;
background-image: url('../Images/arrow_down.gif');
background-repeat: no-repeat;
font-weight: bold;
}
span.export {
padding: 0 4px 1px 20px;
font-size: x-small;
text-align: center;
}
span.excel {
background-image: url('../Images/ico_file_excel.png');
background-repeat: no-repeat;
width: 16px;
}
span.csv {
background-image: url('../Images/ico_file_csv.png');
background-repeat: no-repeat;
width: 16px;
}
span.xml {
background-image: url('../Images/ico_file_xml.png');
background-repeat: no-repeat;
width: 16px;
}
span.first {
background-image: url('../Images/first.jpg');
background-repeat: no-repeat;
width: 16px;
}
span.last {
background-image: url('../Images/last.jpg');
background-repeat: no-repeat;
width: 16px;
}
span.pdf {
background-image: url('../Images/ico_file_pdf.png');
background-repeat: no-repeat;
width: 16px;
}
span.rtf {
background-image: url('../Images/ico_file_rtf.png');
background-repeat: no-repeat;
width: 16px;
}
.rightAlignedPadded {
text-align: right;
padding-right: 10px;
}
call this CSS class in your JSP's JavaScript:
if(navigator.appName == 'Microsoft Internet Explorer')
{
document.write('<link rel="stylesheet" type="text/css" href="css/locked-column.css" />');
}
else
{
document.write('<link rel="stylesheet" type="text/css" href="css/displaytag1.css" />');
}
and make your display-tag as:
<table>
<tr><td>
<div id="tbl-container" style="width: 850px;">
<display:table name="CustomerList" export="true" id="customerList" class="dataTable" defaultorder="ascending" cellspacing="1" requestURI="" frame="true" decorator="org.displaytag.decorator.TotalTableDecorator">
<display:setProperty name="export.pdf.filename" value="OverallOverdue.pdf" />
<display:setProperty name="export.excel.filename" value="OverallOverdue.xls" />
<display:setProperty name="export.csv" value="true" />
<display:setProperty name="export.csv.filename" value="OverallOverdue.csv" />
<display:setProperty name="export.xml" value="true" />
<display:setProperty name="export.xml.filename" value="OverallOverdue.xml" />
<display:setProperty name="paging.banner.placement">top</display:setProperty>
.........
</display:table></div> </td></tr>
<tr><td> </td></tr>
<tr><td>
<div id="export-links">
</div>
</td>
</tr>
</table>

Answer 2

If it is included in scrollable, put:
<div id="export-links">
</div>
outside <table>
You can't have a non-scrollable element inside scrollable table. Maybe you could define that element as absolute position, and to make it like that, but I wouldn't recommend that.
With your code try like this:
<table>
<tr><td>
<div id="tbl-container" style="width: 850px;">
<display:table name="CustomerList" export="true" id="customerList" class="dataTable" defaultorder="ascending" cellspacing="1" requestURI="" frame="true" decorator="org.displaytag.decorator.TotalTableDecorator">
<display:setProperty name="export.pdf.filename" value="OverallOverdue.pdf" />
<display:setProperty name="export.excel.filename" value="OverallOverdue.xls" />
<display:setProperty name="export.csv" value="true" />
<display:setProperty name="export.csv.filename" value="OverallOverdue.csv" />
<display:setProperty name="export.xml" value="true" />
<display:setProperty name="export.xml.filename" value="OverallOverdue.xml" />
<display:setProperty name="paging.banner.placement">top</display:setProperty>
.........
</display:table></div> </td></tr>
<tr><td> </td></tr>
<tr><td>
</td>
</tr>
</table>
<div id="export-links">
your links here
</div>
That way it will not be included in table that are scrolled
Take a look at this example I made:
http://jsfiddle.net/LQJY5/

Answer 3

download flexcroll.js and flexcrollstyles.css from http://www.hesido.com/web.php?page=customscrollbar and include these files.
<table>
<tr>
<td width='100%'> Paging: </td>
</tr>
<tr>
<td>
<div id='customscroll' class='flexcroll' style='height:300px;'>
<table>
<tr>
<td>Your content</td>
</tr>
</table>
</div>
</td>
</tr>
</table>