修复了引导程序中的表头行答案

【问题标题】：Fixed table header row in bootstrap修复了引导程序中的表头行
【发布时间】：2016-10-24 19:08:55
【问题描述】：

需要始终显示标题行并将位置：固定 css 添加到顶行。但面临两个问题：

第一个标题行显示在正文的第一行。
第一个标题行与正文行的宽度不同。

Real Project 表包含 25 列并包含引导程序。

<table class="table table-bordered table-fixed">
<thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@example.com</td>
  </tr>
</table>

CSS

table thead tr{position:fixed;}

https://jsfiddle.net/anieshjoseph/rrbsk9eq/

【问题讨论】：

我很确定这必须使用 JavaScript 来完成。
从 stackoverflow 获得了一些 js 代码，但没有一个适合我的案例。我的项目包括引导 css 和 js 文件。我怀疑这是否会在阻止我尝试的 js 代码方面发挥作用。

标签： jquery css twitter-bootstrap

【解决方案1】：

收到stackoverflow answer 这个问题。

  <div id="table-container">
  <table class="table table-bordered table-fixed" id="maintable">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
    </tbody>
  </table>
  <div id="bottom_anchor"></div>
</div>

以下是css：

thead{
    background-color:white;
}
#maintable{width: 100%}

这还需要一些基于表格、其容器和底部 div 的 javascript 代码。

  function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;
    if (scroll > anchor_top && scroll < anchor_bottom) {
        clone_table = $("#clone");
        if(clone_table.length === 0) {          
            clone_table = $("#maintable").clone();
            clone_table.attr({id: "clone"})
            .css({
                position: "fixed",
                "pointer-events": "none",
                 top:0
            })
            .width($("#maintable").width());

            $("#table-container").append(clone_table);
            // dont hide the whole table or you lose border style & 
            // actively match the inline width to the #maintable width if the 
            // container holding the table (window, iframe, div) changes width          
            $("#clone").width($("#maintable").width());
            // only the clone thead remains visible
            $("#clone thead").css({
                visibility:"visible"
            });
            // clone tbody is hidden
            $("#clone tbody").css({
                visibility:"hidden"
            });
            // add support for a tfoot element
            // and hide its cloned version too
            var footEl = $("#clone tfoot");
            if(footEl.length){
                footEl.css({
                    visibility:"hidden"
                });
            }
        }
    } 
    else {
        $("#clone").remove();
    }
}
$(window).scroll(moveScroll);

JSFiddle Link

【讨论】：