带有固定标题的自滚动html表格

Question

我想制作一个带有固定标题和垂直滚动正文的 html 表格。我知道这已经被其他人实施了，但是这里有一个转折点。表格主体必须自动滚动，而不需要用户使用鼠标滚动（主体从顶部滚动到底部然后返回到顶部），类似于分体式机场起飞板/显示器。我似乎无法做到这一点，目前我正在使用 marquee 标签来做到这一点，这看起来不太好。下面是我的实现：

<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

试试这个：

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

这会给你标题和单元格的确切宽度，希望它有用

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