Question

我有一张带有autoscroll的表。

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

我对如何解决这个问题很困惑，设置了冻结标题表<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：

thead，tbody {

display: block;

}

tbody {

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。

表头在autoscroll中免费

2 个答案: