how to position a header as if its still inside the table

Question

I'm using this jquery plugin called jscrollpane and I'm trying to make it work with tables so that only the repeating part will have scrollbars on it(the elements inside the tbody). Here's my code:

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

I tried to make the tbody as the container but I didn't get the result. I also wrapped the repeating part with paragraph(which does the trick for others) but it doesn't work either.

Now I'm looking for a css solution for this. Is there any way that I could make the table headers retain their styling as if they are inside the table? The problem here is that if I use the plugin on the whole table the table headers are also hidden when I scroll, like this:

I tried using relative positioning but it hides the headers the moment it goes out of the area covered by the table.

Answer 1

PURE CSS SOLUTION:

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;
}

SEE RESULT - (updated with jscrollpane implementation)

​

Answer 2

Add you scroll main div inside the td which has 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>