html - 作り方スクロール可能？

Question

タグを使用<display:table>してjspページにテーブルを表示しています。

ページ番号を使用してレコードをナビゲートできるようになりました。

今、私はすべてのレコードを単一のページに表示したいのですが、スクロールします.(ページネーションなし)

このテーブルはページの一部として設定されるため、1 つの div のみをスクロール可能にすることができます。残りのページはそのままにする必要があります。

提案してください..！

Answer 1

テーブルを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：スクロールします。試して、私たちに知らせてください。

更新：
Jaimonと彼の魔法のコードのおかげで、固定ヘッダーの解決策はここにあります： 私がテストした
Jaimonのブログ
で、IE8とFF14でスムーズに動作します。

頑張ってルチ！
よろしく、
カーン・トラン

Answer 2

@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>&nbsp;</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/で、これが実際の例でどのように機能するかを試してみることができます。

Answer 3

これで試してみてください!!!

$(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"));
        });                 
    }

Answer 4

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

そして、locked-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;
}

およびdisplaytagex.cssとしての別の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>&nbsp;</td></tr> 
    <div id="export-links"> 
 </div>