表头固定在固定页面标题下

By simon at 2018-02-07 • 0人收藏 • 27人看过

表头是固定的,但它在滚动后在页面的顶部。 它的工作原理是我想要的,除了thead固定在错误的地方。 表中有一个溢出x:自动和TD使用白色空间:nowrap所以 表扩展到手内容。 我需要从页面顶部或正下方固定140像素。 我不知道如何抵消th是...它接近,但需要考虑 帐户溢出... 这里是JSFIDDLE - https://jsfiddle.net/rbla/1Ljuycbe/1/ 普莱斯看看第一张桌子......问题在于OVERFLOW-X:AUTO - 我需要克隆表来反映这个... JQQUERY

 ;(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>

4 个回复 | 最后更新于 2018-02-07
2018-02-07   #1

我更新了你的JSFiddle来添加这些功能。 https://jsfiddle.net/g7wgp7gj/1/ 解决的办法是找到并利用他你的计算中的高度 什么时候显示浮动表头。这个标题的高度也会 被用来dynamical设置浮动表头“的”顶部“CSS属性如此 它将被固定在标题下。

position: fixed;
top: <header height>px;

2018-02-07   #2

这解决了滚动标题的问题。乐意效劳。

;
(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>

2018-02-07   #3

我想我已经明白了,但如果由于某种原因这是不符合的 你想要什么,随时告诉我。浮动表格标题不保留 在他们下面的静态的确切位置,但宽度是 相同,并滚动ov呃桌子看起来很平滑。在.header的CSS中, 我加了这个,让它更有个性。

width:97%;
margin-left:1%;
margin-right:2%;
但是一个薄克引起了我的注意,我注意到这在* resizeFixed() *
$table_header_wrap.width($container.width() + 10);
我相信这是造成长桌头的原因(.blue,和 .purple)“悬挂”在桌子的右侧。我改变了 这个。
$table_header_wrap.width($container.width() - 1);
现在弗洛桌旁的桌子和桌子正面对齐。
;
(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() - 1);
            $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;
    max-width: 90%;
}

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

table thead {
    width:100%;
    overflow-x:hidden;
    border-collapse:collapse;
}

.fixed {
    border-collapse:collapse;
    border:inherit;
}

.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: 97%;
    margin-left:1%;
    margin-right:2%;
    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>
我希望这对哟有一些帮助英寸

2018-02-07   #4

我已经修改你的js做你想做的事情 小提琴](https://jsfiddle.net/1Ljuycbe/2/)

(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();
            // width matching added
            $t_fixed.find("tbody").remove().end().addClass("fixed").css({top: $header_height + "px", "width":$this.width()+"px"}).insertBefore($this);
            //scroll attachment between elements
            $this.parent().on('scroll',function(e){
                $t_fixed.css("margin-left",-$this.parent().scrollLeft()+"px");
            });
            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);
 });
});

登录后方可回帖

Loading...