固定ヘッダー付きセルフスクロールhtmlテーブル

Question

固定ヘッダーと垂直スクロールボディでhtmlテーブルを作成したいと思います。私はこれが他の人によって実装されていることを知っていますが、ここにひねりがあります。テーブル本体は、スプリットフラップの空港出発ボード/ディスプレイと同様に、マウスを使用してスクロールする必要なく、自動的にスクロールしなければなりません（本体は上から下にスクロールし、上から上にスクロールします）。私はこれを達成するように見えません。現時点ではマーキータグを使ってこれを行っていますが、これはうまく見えません。以下は私の実装です：

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

誰かが私（のHTML、CSSとjQueryを使用して）これを実現する方法についての正しい方向を指すことができますしてください。

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

これを試してみてください：

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

これはあなたのために利用されているどのような技術に有用