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

添加你在 td 内滚动主 div colspan="3'

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