Table header 自动滚动免费

Question

我有一个 table 自动滚动。

我希望我的 header table 在自动滚动时冻结，或者您可以尝试使用我的 code pen。

我很困惑如何解决这个问题，设置冻结 header table <thead></thead>

这是我的代码：

$(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 == (objDiv.scrollHeight - 100)) {
    objDiv.scrollTop = 0;
  }
  my_time = setTimeout('pageScroll()', 25);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contain">
  <table border="1">
    <thead>
      <tr>
        <th colspan="5">Info Data</th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Phone</th>
        <th>Country</th>
        <th>Position</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Salman</td>
        <td>Male</td>
        <td>0123456789</td>
        <td>Indonesia</td>
        <td>Front-end Developer</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

我有解决方案：

将此添加到 tbody：<tbody id="table_body">

这是css:

头、身 {

display: block;

}

正文{

height: 100px;      
overflow-y: scroll;  
overflow-x: hidden;

}

最后，在您的 js 中进行更改：

document.getElementById("table_body");

Answer 2

代表 OP 发帖。

这个解决了，用这个JavaScript:

var my_time;
  pageScroll();
  $("#table_body").mouseover(function() {
    clearTimeout(my_time);
  }).mouseout(function() {
    pageScroll();
  });

var $table = $('.scroll'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

function pageScroll() {  
    var objDiv = document.getElementById("table_body");
  objDiv.scrollTop = objDiv.scrollTop + 1;  
  if (objDiv.scrollTop == (objDiv.scrollHeight - 100)) {
    objDiv.scrollTop = 0;
  }
  my_time = setTimeout('pageScroll()', 25);
}

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });    
}).resize(); // Trigger resize handler

我有一个demo here。

Table header 自动滚动免费

Table header free in autoscroll

javascript

css

jquery

html-table

autoscroll