顯示錶的滾動條

Question

我想知道如何在分頁欄 和實際的TABLE之間插入<DIV>標籤，該標籤在頂部有 分頁欄時開始結果顯示。如果我只在 display：table之前放置<DIV>標記，它還包含滾動條內的分頁內容。

此外，我不知道如何設置樣式TBODY，因爲它是一點點 混淆。我不確定你們是否寫過這些東西，但是如果你有任何想法，請告訴我 。 和我的代碼是

<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

創建CSS類locked-column.css爲：

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; 
} 

呼叫你的JSP的JavaScript這個CSS類：

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" />'); 
} 

，使您的display-tag爲：

 <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>&nbsp;</td></tr> 
      <tr><td> 
       <div id="export-links"> 
       </div> 
      </td> 
      </tr> 
     </table> 

Answer 2

如果它被包含在滾動，把：

<div id="export-links"> 
       </div> 

外<table>

你不能有滾動表內非滾動的元素。也許你可以將這個元素定義爲絕對位置，並且讓它變成這樣，但我不會推薦它。

與您的代碼嘗試這樣的：

<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>&nbsp;</td></tr> 
      <tr><td> 

      </td> 
      </tr> 
     </table> 

<div id="export-links"> 
    your links here 
</div> 

表這樣它會not be included，系統將滾動

看看這個例子中，我提出：

http://jsfiddle.net/LQJY5/

Answer 3

從http://www.hesido.com/web.php?page=customscrollbar下載flexcroll.js和flexcrollstyles.css幷包含這些文件。

<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>