Css 如何将标题定位为仍在表格中

我正在使用这个名为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>

DVD标题
类别
书

我试着把车身做成容器，但没有得到结果。我还用段落包装了重复部分（这对其他人也有好处），但它也不起作用

现在我正在寻找一个css解决方案。是否有任何方法可以使表格标题保持其样式，就好像它们在表格中一样？ 这里的问题是，如果我在整个表上使用插件，当我滚动时，表头也会隐藏，如下所示：

---

我尝试使用相对定位，但它会在超出表覆盖区域时隐藏标题。

将滚动主div添加到包含colspan=“3”的td中

DVD标题
类别
书

在包含colspan=“3”的td中添加滚动主div

DVD标题
类别
书

纯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>

#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实现更新） ​

纯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>

#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实现更新）

---

​

你能在jsfiddle.net/....@Kyokasuigetsu中显示你的css html代码吗：请参阅下面我的纯css解决方案答案你能在jsfiddle.net/....@Kyokasuigetsu中显示你的css html代码吗？请参阅下面我的纯css解决方案答案。。