显示表格的滚动条 [英] Scroll bar for display table
问题描述
我想知道如何在分页栏之间插入 另外，我不知道如何将样式设置为 创建一个 在您的 JSP 的 JavaScript 中调用这个 并使您的 </td></tr> I was wondering how to insert a Also, I cannot figure out how to set the style to
Create a call this and make your
这篇关于显示表格的滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！TABLE 如果我有顶部的分页栏.如果我只是将 <DIV> 标签放在我的前面display:table，它还包括滚动条内的分页内容.TBODY 因为它有点令人困惑.我不确定你们是否写了这些东西，但你能给我建议吗如果您有任何想法如何实现这一目标.我的代码是<display:table id="data1" name="invprbmList" requestURI="" pagesize="10" export="true" style="width:100%;"装饰器="org.displaytag.decorator.TotalTableDecorator"><tr><td><display:setProperty name="paging.banner.item_name">发票</display:setProperty><display:setProperty name="paging.banner.items_name">发票</display:setProperty><display:setProperty name="paging.banner.some_items_found"><span class="pagebanner">{0} 已找到发票，显示 {2} 到 {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="发票编号"sortable="true" property="invoiceNo" media="xml csv pdf excel" class="l" headerClass="hl"/><display:column property="invDate" title="发票日期" 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="到期日" 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="邮政编码"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>CSS 类 locked-column.css as: div#tbl-container {宽度:740px；/* 默认值将被最小表格宽度或屏幕覆盖解析度*/高度:300px；边距顶部:-11px；溢出:自动；/*滚动条基色:#ffeaff;*/}.dataTable {/*表格布局:固定；*/边框折叠:折叠；/* 背景颜色:白烟；*/}.dataTable th {顶部:表达式(文档.getElementById(tbl-container").scrollTop-2);/* 仅 IE5+ */z-索引:20；字体大小:小；填充:5px 5px 5px 5px ！重要；文本对齐:居中；位置:相对；光标:默认；字体系列:无衬线；字体大小:小；字体粗细:粗体；背景颜色:#BBCCFF；颜色:#FFFFF；}.dataTable thead tr {位置:相对；高度:10px；/*背景颜色:#7CA4E0；*/}.dataTable th a:link,th a:visited {颜色:#1155cc；字体粗细:粗体；文字装饰:无；字体系列:无衬线；}.dataTable a:悬停{颜色:#1155cc；文字装饰:下划线；字体系列:无衬线；字体粗细:粗体；}.dataTable thead th.sorted A {字体粗细:更粗；}.dataTable td {填充:3px 3px 3px 3px ！重要；}.dataTable tbody tr {高度:自动；空白:nowrap；}.dataTable tbody tr.odd {背景色:#FFFFFF；字体大小:x-小；}.dataTable tbody tr.tableRowEven,tr.even {背景色:#DDE5FF；字体大小:x-小；}.dataTable tbody tr td:last-child {/* padding-right: 20px;*/}/*这些样式与锁定列无关*/.dataTable主体{背景颜色:白色；颜色:黑色;字体系列:无衬线；}.dataTable tbody td {填充:2px 4px 2px 4px ！重要；字体系列:无衬线；字体大小:x-小；}.exportlinks {字体系列:无衬线；}/* 样式表为鼠标在行上显示淡蓝色事件 */.dataTable tr.rowMouseOver {白颜色;背景重复:重复-x；背景颜色:rgb(228, 59, 47);/*#8888FF;*/}.dataTable .order1 {背景位置:右 50%；背景图片:url('../Images/arrow_up.gif');背景重复:不重复；字体粗细:粗体；}.dataTable .order2 {背景位置:右 50%；背景图片:url('../Images/arrow_down.gif');背景重复:不重复；字体粗细:粗体；}跨度出口{填充:0 4px 1px 20px；字体大小:x-小；文本对齐:居中；}跨度.excel {背景图片:url('../Images/ico_file_excel.png');背景重复:不重复；宽度:16px；}跨度.csv {背景图像:url('../Images/ico_file_csv.png');背景重复:不重复；宽度:16px；}跨度.xml {背景图片:url('../Images/ico_file_xml.png');背景重复:不重复；宽度:16px；}跨度第一{背景图片:url('../Images/first.jpg');背景重复:不重复；宽度:16px；}span.last {背景图片:url('../Images/last.jpg');背景重复:不重复；宽度:16px；}跨度.pdf {背景图像:url('../Images/ico_file_pdf.png');背景重复:不重复；宽度:16px；}跨度.rtf {背景图像:url('../Images/ico_file_rtf.png');背景重复:不重复；宽度:16px；}.rightAlignedPadded {文本对齐:右；padding-right: 10px;}CSS 类:if(navigator.appName == 'Microsoft Internet Explorer'){document.write('<link rel="stylesheet" type="text/css" href="css/locked-column.css"/>');}别的{document.write('<link rel="stylesheet" type="text/css" href="css/displaytag1.css"/>');}display-tag 为: <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="导出链接">
<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.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>
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;
}
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" />');
}
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>
