我正在使用<display:table>标记在jsp页面中显示表。
现在我可以使用页码来浏览记录。
现在我希望在单页中显示所有记录，但需要滚动。（不分页）
此表被设置为页面的一部分，因此只有一个div可以滚动。页面的页面应该是原样。
请建议..！
答案 0 :(得分：3)
尝试将您的表放在div标记中，然后编辑css文件：
<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>
例如，div代码为displayTableFrame。然后css：
.displayTableFrame {
background-color: green;
overflow-x: scroll;
height: 320px
width: 100%;
}
给它一个固定的高度然后overflow-x：scroll。 试着告诉我们。
的更新的
感谢Jaimon和他的魔法代码，可以在这里找到固定标题的解决方案：
Jaimon's Blog
我已经测试过，它与IE8和FF14一起工作顺利。
祝你好运Ruchi！
最好的问候，
Khanh Tran
答案 1 :(得分：1)
试试这个!!!
$(document).ready(
function() {
scrolify($('#idOfDisplayTable'), 100); // 100 = HEIGHT
}
);
function scrolify(tblAsJQueryObject, height){
var oTbl = tblAsJQueryObject;
var oTblDiv = $("<div/>");
oTblDiv.css('height', height);
oTblDiv.css('overflow-y','scroll');
oTbl.wrap(oTblDiv);
// save original width
oTbl.attr("data-item-original-width", oTbl.width());
oTbl.find('thead tr td').each(function(){
$(this).attr("data-item-original-width",$(this).width());
});
oTbl.find('tbody tr:eq(0) td').each(function(){
$(this).attr("data-item-original-width",$(this).width());
});
// clone the original table
var newTbl = oTbl.clone();
oTbl.parent().parent().prepend(newTbl);
newTbl.wrap("<div/>");
// remove table header from original table
oTbl.find('thead tr').remove();
// remove table body from new table
newTbl.find('tbody tr').remove();
// replace ORIGINAL COLUMN width
newTbl.width(newTbl.attr('data-item-original-width'));
newTbl.find('thead tr td').each(function(){
$(this).width($(this).attr("data-item-original-width"));
});
oTbl.width(oTbl.attr('data-item-original-width'));
oTbl.find('tbody tr:eq(0) td').each(function(){
$(this).width($(this).attr("data-item-original-width"));
});
}
答案 2 :(得分：1)
@Sweety 正如我已经回答过类似的问题，我将通过你为这个答案做的例子。
主要的是您在表格数据之外定义div。像这样：
<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">
This is not scroll-able. It will stay in position
</div>
然后你可以定位div并与表格（或任何其他div，事实上）分开处理
您可以尝试在此处查看实际示例：http://jsfiddle.net/LQJY5/2/
答案 3 :(得分：0)
将其放入JSP Javascript代码
if(navigator.appName == 'Microsoft Internet Explorer')
{
document.write('<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/pages/styles/locked-column.css" />');
}
else
{
document.write('<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/pages/styles/displaytagex.css" />');
}
并将lock-column.css类设为
div#tbl-container {
width: 400px;
/ default value will be overrided by minimum of table width or screen resolution/
height: 300px;
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: 3px 3px 3px 3px !important;
text-align: center;
position: relative;
cursor: default;
font-family: sans-serif;
font-size: small;
font-weight: bold;
background-color: rgb(46, 54, 64);
color: #FFFFF;
}
.dataTable thead tr {
position: relative;
height: 10px;
background-color: #7CA4E0;
}
.dataTable th a:link,th a:visited {
color: #FFFFFF;
text-decoration: none;
font-family: sans-serif;
font-weight: normal;
}
.dataTable a:hover {
color: #FFFFFF;
text-decoration: none;
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: #eee;
font-size: x-small;
}
.dataTable tbody tr.tableRowEven,tr.even {
background-color: #ddd
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;
}
和antoher css as displaytagex.css，包含
input.displayTableFirst {
background-image: url('../Images/first.jpg');
background-repeat: no-repeat;
border: 0px;
width: 27px;
height: 24px;
}
input.displayTableNext {
background-image: url(../Images/next.jpg);
background-repeat: no-repeat;
border: 0px;
width: 27px;
height: 24px;
border: 10px;
}
input.displayTablePrevious {
background-image: url(../Images/previous.jpg);
background-repeat: no-repeat;
border: 0px;
width: 27px;
height: 24px;
border: 10px;
}
input.displayTableLast {
background-image: url(../Images/last.jpg);
background-repeat: no-repeat;
border: 0px;
width: 27px;
height: 24px;
border: 10px;
}
.displayPageButtonSimple {
background: #AEAFAD;
font-family: "Times New Roman", Times, serif;
font-size: small;
color: black;
}
.displayPageButton {
background: #AEAFAD;
font-family: "Times New Roman", Times, serif;
font-size: small;
width: 70px;
color: black;
}
overlay {
background-image: url(../Images/blackDot.png);
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.displayTableFrame {
background-color: white;
height: 320px;
width: 100%;
}
.dataTable {
text-decoration: none;
border: 1px solid #CCC;
/
width: 98%; /
}
.dataTable th {
font-family: sans-serif;
font-size: small;
font-weight: bold;
padding: 3px 3px 3px 3px !important;
background-color: rgb(46, 54, 64);
color: #FFFFF;
}
.dataTable td {
padding: 3px 3px 3px 3px !important;
}
.dataTable thead tr {
position: relative;
height: 10px;
}
.dataTable th a:link,th a:visited {
color: #FFFFFF;
text-decoration: none;
font-family: sans-serif;
font-weight: normal;
}
.dataTable a:hover {
color: #FFFFFF;
text-decoration: none;
font-family: sans-serif;
font-weight: bold;
}
.dataTable thead th.sorted A {
font-weight: bolder;
}
.dataTable tbody {
width: 400px;
height: 230px;
overflow-x: hidden;
overflow-y: auto;
}
.dataTable tbody tr {
height: auto;
white-space: nowrap;
}
.dataTable tbody tr.odd {
background-color: #eee
}
.dataTable tbody tr.tableRowEven,tr.even {
background-color: #ddd
}
.dataTable tbody tr td:last-child {
padding-right: 20px;
}
.dataTable tbody td {
padding: 2px 4px 2px 4px !important;
font-family: sans-serif;
font-size: 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); / #7CA4E0; /
}
.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;
}
.defaultDataTable {
background-color: white;
border: 1px solid #000066;
font-size: xx-small;
margin: 5px;
font: bold normal normal xx-small "Arial Black";
}
.defaultDataTable th {
border-right: 1px solid #c8c8ff;
padding-left: 2px;
padding-right: 12px;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
color: black;
background-color: #AEAFAD;
margin-right: 10px;
white-space: nowrap;
}
.defaultDataTable td {
font-family: verdana, arial, helvetica, sans-serif;
padding-left: 2px;
}
.defaultDataTable tr.total td {
white-space: nowrap;
vertical-align: top;
font-weight: bold;
border-top: 1px solid black;
padding-bottom: 10px;
}
.defaultDataTable tr.total td.customer {
visibility: hidden;
}
.defaultDataTable td.hidden {
display: none;
}
.defaultDataTable th.hidden {
display: none;
}
.defaultDataTable th.r {
text-align: right;
padding-right: 10px;
}
.defaultDataTable th.c {
text-align: center;
}
.defaultDataTable td.r {
text-align: right;
padding-right: 10px;
}
.defaultDataTable td.c {
text-align: center;
}
.defaultDataTable tr.odd {
background-color: #eee
}
.defaultDataTable tr.even {
background-color: #ddd;
}
.defaultDataTable th a {
text-align: left;
color: black;
}
.defaultDataTable .order1 {
background-position: right 50%;
background-image: url('../Images/arrow_up.gif');
background-repeat: no-repeat
}
.defaultDataTable .order2 {
background-position: right 50%;
background-image: url('../Images/arrow_down.gif');
background-repeat: no-repeat
}
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;
}
.pageHeader {
height: 60px;
background-image: url('../Images/header.gif');
background-repeat: repeat-x
}
.pageHeaderText {
font-size: 30px;
margin-left: 5px;
color: black;
font-family: "century gothic", verdana, arial, helvetica, sans-serif;
font-weight: bold;
text-align: left;
display: inline;
white-space: nowrap;
}
.content {
width: 50%;
padding: 10px;
}
.rightColumn {
width: 3px;
}
.customer {
width: 10%;
text-align: left;
}
.company {
width: 10%;
text-align: left;
}
.email {
width: 14%;
text-align: left;
}
.broker {
width: 10%;
text-align: right;
}
.company {
width: 10%;
text-align: left;
}
.fmv {
width: 13%;
text-align: left;
}
.country {
width: 12%;
text-align: left;
}
.tax {
width: 14%;
text-align: left;
}
.size9 {
width: 9%;
text-align: left;
}
.hideColumn {
display: none;
}
.so {
width: 10%;
text-align: left;
}
.type {
width: 10%;
text-align: left;
}
.fmv {
width: 20%;
text-align: left;
}
.plan {
width: 13%;
text-align: left;
}
.eid {
width: 15%;
text-align: left;
}
.orderNumber {
width: 10%;
text-align: left;
}
.orderDate {
text-align: left;
width: 14%;
}
.productName {
width: 25%;
}
.size35 {
width: 35%;
text-align: left;
}
.quantity {
text-align: center;
width: 10%;
}
.rightAlignedPadded {
text-align: right;
padding-right: 10px;
}
.logo {
border-top: 1px solid #000066;
border-left: 1px solid #000066;
border-bottom: 1px solid #000066;
display: inline;
text-align: right;
}
.code {
font-family: verdana, arial, helvetica, "courier new", monospace;
font-size: xx-small;
}
.borderedInline {
display: inline;
border: 1px solid black;
}
img {
border: 0px;
}
.pagelinks {
color: #999999;
margin: 5px;
}
.pagelinks img {
vertical-align: middle;
}
并制作像
这样的jsp<div id="tbl-container">
<display:table name="sessionScope.participantList" export="true" id="tmpId" class="dataTable" defaultorder="ascending" cellspacing="1" >
<display:setProperty name="decorator.media.html" value="displaytag.sample.decorators.MyHtmlTotalWrapper" />
<display:setProperty name="export.pdf.decorator" value="displaytag.sample.decorators.MyITextTotalWrapper" />
<display:setProperty name="export.pdf.filename" value="ParticipantProfile.pdf"
/>
<display:setProperty name="export.rtf.decorator" value="displaytag.sample.decorators.MyITextTotalWrapper" />
<display:setProperty name="export.rtf.filename" value="ParticipantProfile.rtf"
/>
<display:setProperty name="export.excel.filename" value="ParticipantProfile.xls"
/>
<display:setProperty name="export.csv" value="true" />
<display:setProperty name="export.csv.filename" value="ParticipantProfile.csv"
/>
<display:setProperty name="export.xml" value="true" />
<display:setProperty name="export.xml.filename" value="ParticipantProfile.xml"
/>
<display:setProperty name="paging.banner.placement">top</display:setProperty>
<display:column title="" >
</display:column>
</display:table></div>
<tr><td> </td></tr>
<div id="export-links">
</div>