Self-Scrolling-HTML-Tabelle mit fester Kopfzeile

Question

Ich möchte eine HTML-Tabelle mit fester Kopfzeile und vertikale Scroll-Körper machen. Ich weiß, dass dies von anderen umgesetzt wurde, aber hier gibt es eine Wendung. Der Tabellenkörper muss automatisch scrollen, ohne dass ein Benutzer mit der Maus scrollen muss (der Körper scrollt von oben nach unten und dann zurück nach oben), ähnlich wie bei einer Split-Flap-Abflug-/Ankunftsanzeige am Flughafen. Ich kann das anscheinend nicht erreichen, im Moment verwende ich das Marquee-Tag, um das zu tun, was nicht gut aussieht. Im Folgenden finden Sie meine Implementierung:

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

Bitte kann mir jemand zeigen in die richtige Richtung, wie diese (mit HTML CSS und jQuery) zu erreichen.

Answer 1

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

Answer 2

Versuchen Sie folgendes:

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

Dies wird Ihnen die genaue Breite der Kopf- und Zelle geben, hoffen, dass es