0

私はjscrollpaneと呼ばれるこの jquery プラグインを使用しています。繰り返し部分にのみスクロールバー (tbody 内の要素) が表示されるように、テーブルで動作するようにしようとしています。これが私のコードです：

<table>
    <thead>
        <tr>
            <th>DVD Title</th>
            <th>Category</th>
            <th>Book</th>
        </tr>
    </thead>
    <tbody id="container">

        <?php
        while($row = $query->fetch_object()){ 
        ?>
            <tr>
                <td><?php echo $row->dvd_title; ?></td>
                <td><?php echo $row->category; ?></td>
                <td><?php echo $row->book; ?></td>
            </tr>
        <?php
        }
        ?>

    </tbody>
</table>

tbody をコンテナとして作成しようとしましたが、結果が得られませんでした。また、繰り返し部分を段落でラップしました（これは他の人のトリックを行います）が、どちらも機能しません。

今、私はこれのためのcssソリューションを探しています。テーブル ヘッダーがテーブル内にあるかのようにスタイルを保持する方法はありますか? ここでの問題は、テーブル全体でプラグインを使用すると、次のように、スクロールするとテーブル ヘッダーも非表示になることです。

ここに画像の説明を入力

相対配置を使用してみましたが、テーブルでカバーされている領域から出た瞬間にヘッダーが非表示になります。

4

2 に答える 2

2

純粋な CSS ソリューション:

HTML:

<div id="wrapper">
    <ul id="tbl-title"> 
        <li class="seperator">DVD Title</li>
        <li class="seperator">Category</li>
        <li>Book</li>          
    </ul>

    <div id="tbl-data">
        <?php
            while($row = $query->fetch_object()){ 
        ?> 
        <ul class="tbl-row"> 
            <li class="seperator">
                <span><?php echo $row->dvd_title; ?></span>            
            </li>
            <li class="seperator">
                <span><?php echo $row->category; ?></span>            
            </li>
            <li>
                <span><?php echo $row->book; ?></span>
            </li>              
        </ul>
        <?php
            }
        ?>
    </div>    
</div>

CSS:

#tbl-title,
.tbl-row {
    margin:0;
    padding:0;
    list-style-type: none;   
}

#tbl-title li,
.tbl-row li {
    float: left;
    width: 33%;
    color: #333;
    font-size: 13px;
    padding: 5px 0;
    font-family: tahoma;    
}

#tbl-title li{
    background: #ccc;
    font-weight: bold;
    text-align:center;
    border-bottom: 1px solid #999;    
}

.tbl-row li {
    background: #f4f4f4;
    font-weight: normal;
    text-align:left;
    border-bottom: 1px solid #fff;    
}

.tbl-row li span { 
    display: block; 
    padding: 0px 10px; 
    text-transform: uppercase; 
}

.seperator {
    border-right: 1px solid #fff;
}

/* Styles specific to this particular page */
.scroll-pane {
    width: 100%;
    height: 200px;
    overflow: auto;
}

結果を見る - ( jscrollpane実装で更新)

</p>

于 2012-09-04T05:25:05.043 に答える
1

colspan="3' を持つ td 内にスクロール メイン div を追加します。

    <table>        
            <tr>
            <th>DVD Title</th>
            <th>Category</th>
            <th>Book</th>
            </tr>        
            <tr>
            <td colspan="3">
            <div class="scroll-pane jspScrollable" style="overflow: hidden; padding: 0px; width: 760px; " tabindex="0">        
            <div class="jspContainer" style="width: 760px; height: 200px; "><div class="jspPane" style="padding: 0px; width: 740px; top: -110.93331909179688px; ">
            <table>
<tr>
                <td><?php echo $row->dvd_title; ?></td>
                <td><?php echo $row->category; ?></td>
                <td><?php echo $row->book; ?></td>
            </tr>
</table>
            <div class="jspVerticalBar"><div class="jspCap jspCapTop"></div><div class="jspTrack" style="height: 200px; "><div class="jspDrag" style="height: 77px; top: 42.507159651996936px; "><div class="jspDragTop"></div><div class="jspDragBottom"></div></div></div><div class="jspCap jspCapBottom"></div></div></div></div>
            </td>
            </tr>
            </table>
于 2012-09-04T05:05:29.050 に答える