自动滚动中免费表标头

Question

已解决> http://jsfiddle.net/crspu/11704/

我有一个带有自动滚动的桌子。

我想在自动滚动时冻结我的标题表，或者您可以尝试使用我的代码笔。

我对如何解决此问题感到困惑，设置冻结标头表<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

我有解决方案：

1. 将其添加到Tbody：<tbody id="table_body">

2. 这是CSS：

   thead，tbody {

   display: block;
   

   }

   tbody {

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

   }

3. ，最后，在您的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

我在这里有一个演示。