javascript - 使用 JS 滚动表头

标签 javascript html css

您好，我正在处理两个表，一个表有表头，另一个表有表体。在固定表头和两个表内容正确对齐方面需要帮助。在修复表头时，我随后无法对齐表内容给它。在 id 的帮助下，我修复了表格标题。任何人都可以修复此对齐方式。提前致谢。

    <table id="table-1" class="table table-hover">
        <thead>
          <tr>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
          </tr>
        </thead>
    <body>
          <div class="content">
            <table class="table table-striped">
         <tbody>
    <tr class="bordered">
    <td align="center">test </td>
    <td align="center">test </td>
    <td align="center"> test</td>
    <td align="center"> test </td>
    <td align="center" data-toggle="modal"
     id="myBtn"> 
    test </td>
    <td align="center"> test</td>
    <td align="center"> 
     test</td>
    <td align="center"> test </td>
    <td align="center"> test </td>
    <td align="center"> test  </td>
    <td>     
         test
       </td>
    <td>   
    test
          </td>
        <td> 
        test
    </td>
    </tr>
    <tr class="bordered">
    <td align="center">test </td>
    <td align="center">test </td>
    <td align="center"> test</td>
    <td align="center"> test </td>
    <td align="center" data-toggle="modal"
     id="myBtn"> 
    test </td>
    <td align="center"> test</td>
    <td align="center"> 
     test</td>
    <td align="center"> test </td>
    <td align="center"> test </td>
    <td align="center"> test  </td>
    <td>     
         test
       </td>
    <td>   
    test
          </td>
        <td> 
        test
    </td>
    </tr>
    <tr class="bordered">
    <td align="center">test </td>
    <td align="center">test </td>
    <td align="center"> test</td>
    <td align="center"> test </td>
    <td align="center" data-toggle="modal"
     id="myBtn"> 
    test </td>
    <td align="center"> test</td>
    <td align="center"> 
     test</td>
    <td align="center"> test </td>
    <td align="center"> test </td>
    <td align="center"> test  </td>
    <td>     
         test
       </td>
    <td>   
    test
          </td>
        <td> 
        test
    </td>
    </tr>
    <tr class="bordered">
    <td align="center">test </td>
    <td align="center">test </td>
    <td align="center"> test</td>
    <td align="center"> test </td>
    <td align="center" data-toggle="modal"
     id="myBtn"> 
    test </td>
    <td align="center"> test</td>
    <td align="center"> 
     test</td>
    <td align="center"> test </td>
    <td align="center"> test </td>
    <td align="center"> test  </td>
    <td>     
         test
       </td>
    <td>   
    test
          </td>
        <td> 
        test
    </td>
    </tr>
    <tr class="bordered">
    <td align="center">test </td>
    <td align="center">test </td>
    <td align="center"> test</td>
    <td align="center"> test </td>
    <td align="center" data-toggle="modal"
     id="myBtn"> 
    test </td>
    <td align="center"> test</td>
    <td align="center"> 
     test</td>
    <td align="center"> test </td>
    <td align="center"> test </td>
    <td align="center"> test  </td>
    <td>     
         test
       </td>
    <td>   
    test
          </td>
        <td> 
        test
    </td>
    </tr>
    <tr class="bordered">
    <td align="center">test </td>
    <td align="center">test </td>
    <td align="center"> test</td>
    <td align="center"> test </td>
    <td align="center" data-toggle="modal"
     id="myBtn"> 
    test </td>
    <td align="center"> test</td>
    <td align="center"> 
     test</td>
    <td align="center"> test </td>
    <td align="center"> test </td>
    <td align="center"> test  </td>
    <td>     
         test
       </td>
    <td>   
    test
          </td>
        <td> 
        test
    </td>
    </tr><tr class="bordered">
    <td align="center">test </td>
    <td align="center">test </td>
    <td align="center"> test</td>
    <td align="center"> test </td>
    <td align="center" data-toggle="modal"
     id="myBtn"> 
    test </td>
    <td align="center"> test</td>
    <td align="center"> 
     test</td>
    <td align="center"> test </td>
    <td align="center"> test </td>
    <td align="center"> test  </td>
    <td>     
         test
       </td>
    <td>   
    test
          </td>
        <td> 
        test
    </td>
    </tr>
    <tr class="bordered">
    <td align="center">test </td>
    <td align="center">test </td>
    <td align="center"> test</td>
    <td align="center"> test </td>
    <td align="center" data-toggle="modal"
     id="myBtn"> 
    test </td>
    <td align="center"> test</td>
    <td align="center"> 
     test</td>
    <td align="center"> test </td>
    <td align="center"> test </td>
    <td align="center"> test  </td>
    <td>     
         test
       </td>
    <td>   
    test
          </td>
        <td> 
        test
    </td>
    </tr>
    <tr class="bordered">
    <td align="center">test </td>
    <td align="center">test </td>
    <td align="center"> test</td>
    <td align="center"> test </td>
    <td align="center" data-toggle="modal"
     id="myBtn"> 
    test </td>
    <td align="center"> test</td>
    <td align="center"> 
     test</td>
    <td align="center"> test </td>
    <td align="center"> test </td>
    <td align="center"> test  </td>
    <td>     
         test
       </td>
    <td>   
    test
          </td>
        <td> 
        test
    </td>
    </tr>
    <tr class="bordered">
    <td align="center">test </td>
    <td align="center">test </td>
    <td align="center"> test</td>
    <td align="center"> test </td>
    <td align="center" data-toggle="modal"
     id="myBtn"> 
    test </td>
    <td align="center"> test</td>
    <td align="center"> 
     test</td>
    <td align="center"> test </td>
    <td align="center"> test </td>
    <td align="center"> test  </td>
    <td>     
         test
       </td>
    <td>   
    test
          </td>
        <td> 
        test
    </td>
    </tr>
    <tr class="bordered">
    <td align="center">test </td>
    <td align="center">test </td>
    <td align="center"> test</td>
    <td align="center"> test </td>
    <td align="center" data-toggle="modal"
     id="myBtn"> 
    test </td>
    <td align="center"> test</td>
    <td align="center"> 
     test</td>
    <td align="center"> test </td>
    <td align="center"> test </td>
    <td align="center"> test  </td>
    <td>     
         test
       </td>
    <td>   
    test
          </td>
        <td> 
        test
    </td>
    </tr>
    <tr class="bordered">
    <td align="center">test </td>
    <td align="center">test </td>
    <td align="center"> test</td>
    <td align="center"> test </td>
    <td align="center" data-toggle="modal"
     id="myBtn"> 
    test </td>
    <td align="center"> test</td>
    <td align="center"> 
     test</td>
    <td align="center"> test </td>
    <td align="center"> test </td>
    <td align="center"> test  </td>
    <td>     
         test
       </td>
    <td>   
    test
          </td>
        <td> 
        test
    </td>
    </tr>
    <tr class="bordered">
    <td align="center">test </td>
    <td align="center">test </td>
    <td align="center"> test</td>
    <td align="center"> test </td>
    <td align="center" data-toggle="modal"
     id="myBtn"> 
    test </td>
    <td align="center"> test</td>
    <td align="center"> 
     test</td>
    <td align="center"> test </td>
    <td align="center"> test </td>
    <td align="center"> test  </td>
    <td>     
         test
       </td>
    <td>   
    test
          </td>
        <td> 
        test
    </td>
    </tr><tr class="bordered">
    <td align="center">test </td>
    <td align="center">test </td>
    <td align="center"> test</td>
    <td align="center"> test </td>
    <td align="center" data-toggle="modal"
     id="myBtn"> 
    test </td>
    <td align="center"> test</td>
    <td align="center"> 
     test</td>
    <td align="center"> test </td>
    <td align="center"> test </td>
    <td align="center"> test  </td>
    <td>     
         test
       </td>
    <td>   
    test
          </td>
        <td> 
        test
    </td>
    </tr>
    <tr class="bordered">
    <td align="center">test </td>
    <td align="center">test </td>
    <td align="center"> test</td>
    <td align="center"> test </td>
    <td align="center" data-toggle="modal"
     id="myBtn"> 
    test </td>
    <td align="center"> test</td>
    <td align="center"> 
     test</td>
    <td align="center"> test </td>
    <td align="center"> test </td>
    <td align="center"> test  </td>
    <td>     
         test
       </td>
    <td>   
    test
          </td>
        <td> 
        test
    </td>
    </tr>
    </tbody>
    </table>
    <table id="header-fixed"></table>
var tableOffset = $("#table-1").offset().top;

var $header = $("#table-1 > thead").clone();

var $fixedHeader = $("#header-fixed").append($header);



$(window).bind("scroll", function() {

    var offset = $(this).scrollTop();



    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {

        $fixedHeader.show();

    }

    else if (offset < tableOffset) {

        $fixedHeader.hide();

    }

});

Here is the Demo

最佳答案

您想在滚动表(原始表)的顶部显示一个固定 thead(克隆表)。

检查这个工作演示:CODEPEN demo

这是您要找的吗？工作原理:

HTML部分:

<!-- a CONTAINER for everything -->
<div id="table-holder">
  <!-- a fixed TOP that is visible or hidden on scroll -->
  <div id="table-top">
    <!-- a TABLE CLONE that contains the THEAD -->
    <table id="table-clone" border="1"></table>
  </div>
  <!-- a CONTAINER that allows the original table to scroll -->
  <div id="table-scroll">
    <!-- the ORIGINAL TABLE -->
    <table id="table-original" border="1">
      <!-- the THEAD -->
      <thead>....</thead>
      <!-- the TBODY -->
      <tbody>....</tbody>
    </table>
  </div><!-- endof: #table-scroll -->
</div><!-- endof: #table-holder -->

CSS 部分:

#table-holder {
  position:relative;
}
#table-top {
  width:100%;  /* important */
  position:absolute;  /* important -> always at top */
  display:none;  /* hidden at first */
}
#table-scroll {
  float:left;
  width:100%;
  height:100%;
  overflow-y:scroll; /* important */
}
table {
  width:100%;
}

JS 部分(jQuery):

// set main table html vars
var $table_top = $("#table-top");
var $table_scroll = $("#table-scroll");
var $table_clone = $("#table-clone");
var $thead_original = $("#table-original thead");
var $thead_clone = $thead_original.clone();
// copy the original THEAD into table-top
$table_clone.append($thead_clone);
// adjust table-top width (consider the width of the Y scrollbar)
$table_top.css("width", $thead_original.width())
// set vars needed to show/hide table-top
var thead_height = $thead_original.height();
//// set the threshold for the show/hide action
var visible_top = $table_scroll.offset().top;
var table_top_visible = 0;
// set onScroll action: show/hide table-top
$table_scroll.on("scroll",function(){
  // the the current offset of the original THEAD
  var thead_top = $thead_original.offset().top;
  //// get the position of the bottom of the THEAD
  var thead_bottom = thead_top + thead_height;
  // check if the original THEAD is hidden
  if (thead_bottom < visible_top) {
    // if the original is hidden -> show the clone
    if (!table_top_visible) {
      table_top_visible = 1;
      $table_top.fadeIn();
    }
  } else {
    // else, the original is visible -> hide the clone
    if (table_top_visible) {
      table_top_visible = 0;
      $table_top.fadeOut();
    }
  }
});

关于javascript - 使用 JS 滚动表头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53932178/

上一篇：css - 按钮将字体大小更改为某些未指定的

下一篇：html - CSS:打开多个元素时垂直菜单不可滚动

相关文章：

javascript - 创建使用 50 作为负值阈值的 0-50-100 百分位数面积线图

javascript - 如何使 html 和 javascript 代码同时可重用？

html - 表格中图片下方的居中文本

CSS - 保持悬停状态和延迟转换

Javascript/Lodash/Redux - 从对象返回具有特定 id 的对象

javascript - 初始设置要排序的 HTML 列

javascript - 更新表格中的总计

html - itemprop=图片元素上的 url 属性未验证

javascript - 首字母不能大写，元素未更新

css 使用带有 div 类选择器的 "last-child"css 元素

©2024 IT工具网  联系我们