Self-scrolling html table with fixed header

Question

I want to make an html table with fixed header and vertical scrolling body. I know this has been implemented by others however there is a twist here. The table body must scroll automatically without the need for a user to scroll using the mouse (the body scrolls from top to bottom and then back to top) similar to a split-flap airport departure board/display. I can't seem to achieve this, at the moment I'm using the marquee tag to do this, which does not look good. Below is my implementation:

<marquee behavior="scroll" direction="up" scrollamount="3" >
<table>
    <thead>
      <tr>
         <th>header1</th>
         <th>header2</th>
         <th>header3</th>
         <th>header4</th>
      </tr>
    </thead>
    <tbody>
         <tr>
            <td>cont1</td>
            <td>cont2</td>
            <td>cont3</td>
            <td>cont4</td>
         </tr>
         <tr>
            <td>cont1</td>
            <td>cont2</td>
            <td>cont3</td>
            <td>cont4</td>
         </tr>
         <tr>
            <td>cont1</td>
            <td>cont2</td>
            <td>cont3</td>
            <td>cont4</td>
         </tr>
         <tr>
            <td>cont1</td>
            <td>cont2</td>
            <td>cont3</td>
            <td>cont4</td>
         </tr>
         ...
    </tbody>
</table>

Please can someone point me the right direction on how to achieve this (using html css and jquery).

Answer 1

Try this :

<table>
<tr>
  <td>header1</td>
 <td>header2</td>
 <td>header3</td>
 <td>header4</td>
  </tr>
</table>

 <table id="secondtbl" >        
   <tbody>
     <tr>
        <td>cont1</td>
        <td>cont2</td>
        <td>cont3</td>
        <td>cont4</td>
     </tr>
     <tr>
        <td>cont1</td>
        <td>cont2</td>
        <td>cont3</td>
        <td>cont4</td>
     </tr>
     <tr>
        <td>cont1</td>
        <td>cont2</td>
        <td>cont3</td>
        <td>cont4</td>
     </tr>
     <tr>
        <td>cont1</td>
        <td>cont2</td>
        <td>cont3</td>
        <td>cont4</td>
     </tr>
     ...
   </tbody>
</table>

CSS :

table{
 border:1px solid black;
 width:200px;
}

td{
 border:1px solid red;
 padding : 2px;
}
#secondtbl{
 width:35%;
}

This will give you the exact width of header and cell , hope it is useful

Answer 2

var my_time;
$(document).ready(function() {
pageScroll();
$("#contain").mouseover(function() {
clearTimeout(my_time);
}).mouseout(function() {
pageScroll();
});
});

function pageScroll() {
var objDiv = document.getElementById("contain");
objDiv.scrollTop = objDiv.scrollTop + 1;  
if ((objDiv.scrollTop + 100) == objDiv.scrollHeight) {
objDiv.scrollTop = 0;
  }
my_time = setTimeout('pageScroll()', 25);
}

Demo