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

具有固定标题的自滚动html表

2 个答案: