Самопрокручиваемая таблица 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

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

Это даст вам точную ширину заголовка и ячейки, надеюсь, что это полезно