Scrollable Table in HTML with Fixed header and footer

Hi Experts,

Can anyone show me how to do a scrollable table with fixed header and footer rows, where the body is scrollable.

Thanks
APD TorontoAsked:
Who is Participating?
 
Julian HansenCommented:
If you google this there are lots of samples out there.

Here is one that uses pure CSS

http://www.imaputz.com/cssStuff/bigFourVersion.html
0
 
Bob LearnedCommented:
For fixed position, you just need to use position: absolute.  

Here is an example of both a fixed header and footer, that you can easily translated to CSS:

<html>
  <body style="height:100%; width:100%">
    <div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;"> 
    </div>
  </body>
</html> 

Open in new window

0
 
APD TorontoAuthor Commented:
I paid someone, and heres the solution FYI:

.tdHead{
    border: 1px solid green;
    text-align: center;
    font-weight: bold;
}
#divScroll{
    /*border: 2px solid red;*/
    height: 400px;
    overflow: auto;
}
div {
    width: 255px;
}
td{
    border: 1px solid green;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
}
.colTime{
    width: 95px;
    font-size: 90%;
}
.colTripID{
    width: 44px;
    max-width: 44px;
}
.colDriver{
    width: 73px;
}

tfoot{
    background-color: yellow;
}

Open in new window


 <!DOCTYPE html>
<html lang="en">

 <head>
	<meta charset="utf-8">
        <title>Scroll Prototype</title>
	       
        
        <link rel="stylesheet" href="dispatch.css">
        
    
            
</head>


    <body >

    <div id="divPageTitles">
        <h1>Scroll Tables</h1><br>
    </div>
    <br>
    <!--Results START-->
    <div>
        
	<table>
        
            <tbody>
                <th class="tdHead colTime">Pickup<br>Time</th>
                
                <th class="tdHead colTripID">Trip<br>ID</th> 

                <th class="tdHead colDriver">Driver</th>
                
            </tbody>

        </table>
        
        <div id="divScroll">
            
            <table>
            <tbody>
                
            <?php
                for($i = 0; $i < 100; $i++):
            ?>
                
                <tr>
                
                    <td class="colTime" id="tdPUTime">0</td>

                    <td class="colTripID">SSS</td> 

                    <td class="colDriver">2</td>

                </tr>

    <?php 
        endfor;
    ?>

</tbody>   

            </table>
   </div>

        <div>
            <table>
<tfoot>
                <tr>
                <td class="colTime">
                    Foot R1C1
                </td>
                <td class="colTripID">
                    Foot R1C2
                </td>
                <td class="colDriver">
                    Foot R1C3
                </td>                
                
                
                
            </tr>
            <tr>
                <td class="colTime">
                    Foot R3C1
                </td>
                <td class="colTripID">
                    Foot R2C2
                </td>
                <td class="colDriver">
                    Foot R2C3
                </td>                
                
                                
            </tr>
</tfoot>

        </table>
    </div>    
    <!--Results END-->
    
    </body>
 
 </html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.