javascript - 表头固定在固定页眉下方-6ren

javascript - 表头固定在固定页眉下方

转载作者：太空狗更新时间：2023-10-29 15:07:10

表头是固定的，但滚动后在页面顶部。它完全按照我想要的方式工作，除了 thead 被固定在错误的位置。

表格有一个 overflow-x:auto 并且 TD 使用 white-space:nowrap 所以表格会扩展以处理内容。

我需要将它固定在页眉顶部或正下方 140 像素处。我不知道如何抵消这个...它很接近，但需要考虑溢出...

这是 JSFIDDLE - https://jsfiddle.net/rbla/1Ljuycbe/1/

请查看第一个表...问题出在 OVERFLOW-X:AUTO - 我也需要克隆表来反射(reflect)这一点...

JQUERY

 ;(function($) {
   $.fn.fixMe = function() {
  return this.each(function() {
     var $this = $(this),
        $t_fixed;
     function init() {
        $this.wrap('<div class="container" />');
        $t_fixed = $this.clone();
        $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
        resizeFixed();
     }
     function resizeFixed() {
        $t_fixed.find("th").each(function(index) {
           $(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
        });
     }
     function scrollFixed() {
        var offset = $(this).scrollTop(),
        tableOffsetTop = $this.offset().top,
        tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
        if(offset < tableOffsetTop || offset > tableOffsetBottom)
           $t_fixed.hide();
        else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
           $t_fixed.show();
     }
     $(window).resize(resizeFixed);
     $(window).scroll(scrollFixed);
     init();
  });
     };})(jQuery);


$(document).ready(function(){
   $("table").fixMe();
   $(".up").click(function() {
       $('html, body').animate({
       scrollTop: 0
   }, 2000);
   });
});

CSS

 h1, h2 {
       text-align: center;
       text-transform: uppercase;
      }

    .container {
       width: 90%;
       margin: auto;
       overflow-x:auto; /* MUST KEEP */
      }

     table {
       border-collapse:collapse;
       width:100%;
      }

     .blue {
       border:2px solid #1ABC9C;
      }

     .blue thead {
       background:#1ABC9C;
     }

     .purple{
       border:2px solid #9B59B6;
     }

.purple thead{
  background:#9B59B6;
}

thead {
  color:white;
}

th,td {
  text-align:center;
  padding:5px 0;
  white-space: nowrap; /* MUST KEEP */
}

tbody tr:nth-child(even) {
  background:#ECF0F1;
}

tbody tr:hover {
background:#BDC3C7;
  color:#FFFFFF;
}

.fixed {
  top:0;
  position:fixed;
  width:auto;
  display:none;
  border:none;
}

.scrollMore {
  margin-top:10px;
}

.up {
  cursor:pointer;
}

.header {
    font: 13px Arial, Helvetica, sans-serif;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    height: 140px;
    border: 1px solid #000;
    }

 #pure {
   margin-top:200px;
 }

;
(function($) {
  $.fn.fixMe = function() {
    return this.each(function() {
      var $this = $(this),
        $t_fixed,
        $header_height = $('header').height();

      function init() {
        $this.wrap('<div class="container" />');
        $t_fixed = $this.clone();
        $t_fixed.find("tbody").remove().end().addClass("fixed").css({
          top: $header_height + "px"
        }).insertBefore($this);
        resizeFixed();
      }

      function resizeFixed() {
        $t_fixed.find("th").each(function(index) {
          $(this).css("width", $this.find("th").eq(index).outerWidth() + "px");
        });
      }

      function scrollFixed() {
        var offset = $(this).scrollTop(),
          tableOffsetTop = $this.offset().top,
          tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
        if (offset + $header_height < tableOffsetTop || offset + $header_height > tableOffsetBottom)
          $t_fixed.hide();
        else if (offset + $header_height >= tableOffsetTop && offset + $header_height <= tableOffsetBottom && $t_fixed.is(":hidden"))
          $t_fixed.show();
      }
      $(window).resize(resizeFixed);
      $(window).scroll(scrollFixed);
      init();
    });
  };
})(jQuery);

$(document).ready(function() {
  $("table").fixMe();
  $(".up").click(function() {
    $('html, body').animate({
      scrollTop: 0
    }, 2000);
  });
});

h1,
h2 {
  text-align: center;
  text-transform: uppercase;
}

.container {
  width: 90%;
  margin: auto;
  overflow-x: auto;
  /* MUST KEEP */
}

table {
  border-collapse: collapse;
  width: 100%;
}

.blue {
  border: 2px solid #1ABC9C;
}

.blue thead {
  background: #1ABC9C;
}

.purple {
  border: 2px solid #9B59B6;
}

.purple thead {
  background: #9B59B6;
}

thead {
  color: white;
}

th,
td {
  text-align: center;
  padding: 5px 0;
  white-space: nowrap;
  /* MUST KEEP */
}

tbody tr:nth-child(even) {
  background: #ECF0F1;
}

tbody tr:hover {
  background: #BDC3C7;
  color: #FFFFFF;
}

.fixed {
  top: 0px;
  position: fixed;
  width: auto;
  display: none;
  border-top: none;
  border-bottom: none;
}

.scrollMore {
  margin-top: 10px;
}

.up {
  cursor: pointer;
}

.header {
  font: 13px Arial, Helvetica, sans-serif;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  height: 140px;
  border: 1px solid #000;
}

#pure {
  margin-top: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">Fixed Header - 140PX</header>

<div id="pure">

  <h1>Table Fixed Header</h1>

  <h2>At Bottom of Fixed Header</h2>

  <h2>&darr; SCROLL &darr;</h2>



  <div class="container">

    <table class="blue">
      <thead>
        <tr>
          <th>Colonne 1</th>
          <th>Colonne 2</th>
          <th>Colonne 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non asdf asdf asdfsad fsdf asdf sadfsad sdf adf sad sadfasd fsf</td>
          <td>Mais Non asdf asdf asdfsad fsdf asdf sadfsad sdf adf sad sadfasd fsf</td>
          <td>Allo Non asdf asdf asdfsad fsdf asdf sadfsad sdf adf sad sadfasd fsf</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h2 class="scrollMore">&darr; SCROLL MORE &darr;</h2>

  <div class="container">
    <table class="purple">
      <thead>
        <tr>
          <th>Colonne 1</th>
          <th>Colonne 2</th>
          <th>Colonne 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h2 class="up scrollMore">&uarr; UP &uarr;</h2>

</div>

最佳答案

这解决了滚动标题时的标题问题。

(function($) {
  $.fn.fixMe = function() {
    return this.each(function() {
      var $this = $(this),
        $t_fixed, $table_wrap, $table_header_wrap, $container,
        $header_height = $('header').height();

      function init() {
        $container = $this.parent();
        $table_header_wrap = $('<div>').addClass('table_header_wrap').insertAfter($this);
        $table_wrap = $('<div>').addClass('table_wrap').insertAfter($table_header_wrap).append($this);
        $t_fixed = $this.clone().find("tbody").remove().end().hide().appendTo($table_header_wrap);
        $table_header_wrap.css({
          top: $header_height + "px"
        }).on('scroll', header_wrap_scroll);
        resizeFixed();
      }

      function resizeFixed() {
        $table_header_wrap.width($container.width() + 10);
        //$table_wrap.width($container.width());
        $t_fixed.width($this.width() + 2);
        $t_fixed.find("th").each(function(index) {
          $(this).css("width", $this.find("th").eq(index).outerWidth() + "px");
        });
      }

      function scrollFixed() {
        var offset = $(this).scrollTop(),
          tableOffsetTop = $this.offset().top,
          tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
        if (offset + $header_height < tableOffsetTop || offset + $header_height > tableOffsetBottom)
          $t_fixed.hide();
        else if (offset + $header_height >= tableOffsetTop && offset + $header_height <= tableOffsetBottom && $t_fixed.is(":hidden"))
          $t_fixed.show();
      }

      function header_wrap_scroll() {
        $table_wrap.scrollLeft($table_header_wrap.scrollLeft());
      }
      $(window).resize(resizeFixed);
      $(window).scroll(scrollFixed);
      init();
    });
  };
})(jQuery);

$(document).ready(function() {
  $("table").fixMe();
  $(".up").click(function() {
    $('html, body').animate({
      scrollTop: 0
    }, 2000);
  });
});

h1,
h2 {
  text-align: center;
  text-transform: uppercase;
}

.container {
  width: 90%;
  margin: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.blue {
  border: 2px solid #1ABC9C;
}

.blue thead {
  background: #1ABC9C;
}

.purple {
  border: 2px solid #9B59B6;
}

.purple thead {
  background: #9B59B6;
}

thead {
  color: white;
}

th,
td {
  text-align: center;
  padding: 5px 0;
  white-space: nowrap;
  /* MUST KEEP */
}

tbody tr:nth-child(even) {
  background: #ECF0F1;
}

tbody tr:hover {
  background: #BDC3C7;
  color: #FFFFFF;
}

.table_wrap {
  overflow-x: hidden;
}

.table_header_wrap {
  position: fixed;
  overflow-x: auto;
}

.scrollMore {
  margin-top: 10px;
}

.up {
  cursor: pointer;
}

.header {
  font: 13px Arial, Helvetica, sans-serif;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  height: 140px;
  border: 1px solid #000;
}

#pure {
  margin-top: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">Fixed Header - 140PX</header>
<div id="pure">
  <h1>Table Fixed Header</h1>
  <h2>At Bottom of Fixed Header</h2>
  <h2>&darr; SCROLL &darr;</h2>
  <div class="container">

    <table class="blue">
      <thead>
        <tr>
          <th>Colonne 1</th>
          <th>Colonne 2</th>
          <th>Colonne 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non asdf asdf asdfsad fsdf asdf sadfsad sdf adf sad sadfasd fsf</td>
          <td>Mais Non asdf asdf asdfsad fsdf asdf sadfsad sdf adf sad sadfasd fsf</td>
          <td>Allo Non asdf asdf asdfsad fsdf asdf sadfsad sdf adf sad sadfasd fsf</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h2 class="scrollMore">&darr; SCROLL MORE &darr;</h2>

  <div class="container">
    <table class="purple">
      <thead>
        <tr>
          <th>Colonne 1</th>
          <th>Colonne 2</th>
          <th>Colonne 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h2 class="up scrollMore">&uarr; UP &uarr;</h2>

</div>

更新

这是根据 OP 要求对表格底部的滚动条进行的修复。

(function($) {
  $.fn.fixMe = function() {
    return this.each(function() {
      var $this = $(this),
        $t_fixed, $table_wrap, $table_header_wrap, $container,
        $header_height = $('header').height();

      function init() {
        $container = $this.parent();
        $table_header_wrap = $('<div>').addClass('table_header_wrap').insertAfter($this);
        $table_wrap = $('<div>').addClass('table_wrap').insertAfter($table_header_wrap).append($this).on('scroll', table_wrap_scroll);
        $t_fixed = $this.clone().find("tbody").remove().end().hide().appendTo($table_header_wrap);
        $table_header_wrap.css({
          top: $header_height + "px"
        });
        resizeFixed();
      }

      function resizeFixed() {
        $table_header_wrap.width($container.width());
        //$table_wrap.width($container.width());
        $t_fixed.width($this.width() + 2);
        $t_fixed.find("th").each(function(index) {
          $(this).css("width", $this.find("th").eq(index).outerWidth() + "px");
        });
      }

      function scrollFixed() {
        var offset = $(this).scrollTop(),
          tableOffsetTop = $this.offset().top,
          tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
        if (offset + $header_height < tableOffsetTop || offset + $header_height > tableOffsetBottom)
          $t_fixed.hide();
        else if (offset + $header_height >= tableOffsetTop && offset + $header_height <= tableOffsetBottom && $t_fixed.is(":hidden"))
          $t_fixed.show();
      }

      function table_wrap_scroll() {
        $table_header_wrap.scrollLeft($table_wrap.scrollLeft());
      }
      $(window).resize(resizeFixed);
      $(window).scroll(scrollFixed);
      init();
    });
  };
})(jQuery);

$(document).ready(function() {
  $("table").fixMe();
  $(".up").click(function() {
    $('html, body').animate({
      scrollTop: 0
    }, 2000);
  });
});

h1,
h2 {
  text-align: center;
  text-transform: uppercase;
}

.container {
  width: 90%;
  margin: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.blue {
  border: 2px solid #1ABC9C;
}

.blue thead {
  background: #1ABC9C;
}

.purple {
  border: 2px solid #9B59B6;
}

.purple thead {
  background: #9B59B6;
}

thead {
  color: white;
}

th,
td {
  text-align: center;
  padding: 5px 0;
  white-space: nowrap;
  /* MUST KEEP */
}

tbody tr:nth-child(even) {
  background: #ECF0F1;
}

tbody tr:hover {
  background: #BDC3C7;
  color: #FFFFFF;
}

.table_wrap {
  overflow-x: auto;
}

.table_header_wrap {
  position: fixed;
  overflow-x: hidden;
}

.scrollMore {
  margin-top: 10px;
}

.up {
  cursor: pointer;
}

.header {
  font: 13px Arial, Helvetica, sans-serif;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  height: 140px;
  border: 1px solid #000;
}

#pure {
  margin-top: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">Fixed Header - 140PX</header>
<div id="pure">
  <h1>Table Fixed Header</h1>
  <h2>At Bottom of Fixed Header</h2>
  <h2>&darr; SCROLL &darr;</h2>
  <div class="container">

    <table class="blue">
      <thead>
        <tr>
          <th>Colonne 1</th>
          <th>Colonne 2</th>
          <th>Colonne 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non asdf asdf asdfsad fsdf asdf sadfsad sdf adf sad sadfasd fsf</td>
          <td>Mais Non asdf asdf asdfsad fsdf asdf sadfsad sdf adf sad sadfasd fsf</td>
          <td>Allo Non asdf asdf asdfsad fsdf asdf sadfsad sdf adf sad sadfasd fsf</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h2 class="scrollMore">&darr; SCROLL MORE &darr;</h2>

  <div class="container">
    <table class="purple">
      <thead>
        <tr>
          <th>Colonne 1</th>
          <th>Colonne 2</th>
          <th>Colonne 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
        <tr>
          <td>Non</td>
          <td>Mais</td>
          <td>Allo !</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h2 class="up scrollMore">&uarr; UP &uarr;</h2>

</div>

关于javascript - 表头固定在固定页眉下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48176194/

文章推荐： java - 使用 Ant 的 JaCoCo Android 覆盖率

文章推荐： javascript - 在悬停时显示具有模糊/渐变边缘的图像部分

TCPDF - 仅在某些页面上有页脚/页眉
我想将页 footer 分放在文档的每一页上，除了第一页。我通过扩展 TCPPDF 类并覆盖其页脚方法来创建我的自定义页脚。然后根据文档并使用以下示例，我明白我应该使用 SetPrintHeade
html - 页眉、主要和页脚定位
我的页面分为 3 个部分。页眉主要和页脚。 header 固定在顶部，大小为 109px，边框高 6px，因此 main 到顶部的边距为 109px。我希望 main 扩展到 heade
javascript - 页眉/页脚之间的内容
我正在构建一个网站，其中每个页面都有一个 , 和一个 . 据我了解，应用程序的入口点应包括这三个组件，并且应根据用户所在的路线呈现一个或多个附加组件。我已经像这样构建了我的入口点: App.js
html - 页眉/页脚出现在错误的位置
谁能告诉我为什么Footer出现在页面顶部，而我看不到Header或LayoutDiv9？这是我添加的第二个 CSS 表，第一个是自动添加的 Fluid Grid Layout CSS 表，我根本没
css - 页眉 - 全宽
我的应用程序中有这个页面: http://actibities-uniongr.rhcloud.com/pages/view-demo 如果您将浏览器的窗口缩短到小于 1000 像素并水平滚动，您会看
python - 页眉/页脚终端显示
这个问题已经有答案了: Python command line interaction library? (3 个回答) 已关闭10 年前。如何创建一个包含静态页眉和页脚的 Python 脚本，如下
HTML 页眉/页脚打印功能
我正在努力为我们的 Mediboard 元素提供完整的 HTML 页眉/页脚打印功能。从长远来看，我知道 CSS3 页面媒体模块将满足我的需求，但这至少需要两三年时间。所以我试着让它与 CSS2
CSS 页眉 - 如何使用打印页边距？
我可以在每页上打印页眉，但我不熟悉打印页边距。我认为 @page css 可以工作，但它似乎不会影响页边距。如果我在正文上设置边距，它在第一页上有效，但后续页面默认从上边距开始，将页眉放在文本顶部。
header - DotNetNuke - 页眉、内容和页脚
有什么办法，就像 WordPress 一样，创建 header.php、theme-file.php 和 footer.php，然后使用钩子(Hook)将它们组合起来？对我来说仍然复制皮肤文件似乎
ios6 - UICollectionView 页眉/页脚引用大小崩溃
我正在努力解决以下问题。我有一个 UICollectionView，它的布局的页眉和页脚引用大小设置为一个值(比如 40.0)。当我删除/插入单元格并且集合 View 位于页眉和页脚不在屏幕上的位置时
javascript - 如何使用js加载网站布局(页眉，页脚)
我是 javascript 新手。我想使用 ajax 加载我的网站主模板文件(页眉、页脚、侧边栏)。我的布局文件如下所示。布局.php header(); $ret .= $app->side
css - 页眉、内容、页脚未显示图像
这是我的代码。内容图像曾短暂地工作，但现在消失了。试图让Header只出现在页面顶部，图片高度为1000px。页面底部的页脚，图像高度为 1000px。内容图像需要重复以适合内容。这是一个博客，所以
html - 页眉、正文、页脚的多个背景图像
我正在尝试将以下图像添加为网站内容的背景: http://webbos.co/vibration/wp-content/themes/vibration-child-theme/images/back
css - rst2pdf 页眉/页脚文本颜色
如何更改样式表中的页眉/页脚文本颜色？我试过了，没有结果: footer: { parent: normal, alignment: TA_CENTER, textColor: red
html - 页眉 + 内容 + 带有嵌套所有内容的表单的页脚
我有以下 HTML，它有一个页眉、一个可滚动的内容和一个页脚，并且工作正常。我想添加到此 HTML 的是一个包装所有三个 div 的表单，问题是一旦我用标签包装 div，布局就会中断。有什么建议吗？
javascript - 页眉/页脚导航更新 jquery
我使用 jQuery 创建了具有不同状态的页眉和页脚导航。单击页脚导航时，我在更新页眉导航时遇到问题。例如，当用户单击页脚导航中的列表 1 时，我希望页眉导航也更新为相同的选择。我包含了一个 jsfi
HTML:页眉+页脚+具有特定规范的流体内容
我需要创建一个网页，其中包含正常页眉 + 粘性页脚 + 垂直拉伸(stretch)的流体内容。但是，这些位置不能是绝对的，因为我需要 780 像素的页面最小高度。我设法使用表格完成了此操作，但我真的
页眉/页脚问题之间的 HTML 电子邮件模板内容
我知道这可能是一件非常简单的事情，但除了很棒的 Stack Overflow 社区之外，我不知道有谁可以帮助我解决我的问题。我已经有一段时间没有在这种程度上使用 HTML/CSS 了。我正在尝试为我
css - 页眉 Logo 已偏离中心
我前段时间做了一个wordpress网站。我今天刚刚看了一眼，由于某种原因，这个标志已经向东传播了。它已经厌倦了 clearfix 的 float 、文本对齐和边距:0 自动。谁能告诉我发生了什么，或
html - 页眉/页脚/主要代码
我需要帮助创建包含#header、#footer 和#main 的div 的代码。我只是不确定它在代码中的位置。我创建了一个带有 css 样式表的简单 html 页面。我并不是要任何人为我编写代码，因

太空狗

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 表头固定在固定页眉下方