Question

表标题是固定的，但滚动后它位于页面顶部。它完全符合我的要求，除了thead被固定在错误的地方。

该表有一个overflow-x：auto，而TD正在使用white-space：nowrap，因此表格会扩展以处理内容。

我需要将其固定在页眉顶部或右下方140像素处。我无法弄清楚如何抵消这个......它很接近，但需要考虑溢出......

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

请查看FIRST表...问题出在OVERFLOW-X：AUTO - 我需要克隆表来反映这一点......

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我已更新您的JSFiddle以添加这些功能。 https://jsfiddle.net/g7wgp7gj/1/

解决方案是在计算中查找并利用标题的高度，以显示何时显示浮动表标题。此标头高度还将用于动态设置浮动表头的“顶部”CSS属性，以便将其固定在标题下。

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

Answer 2

这可以通过滚动标题修复标题问题。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

根据OP需求，这是表格底部滚动条的修复。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这是Munim Munna上面answer接受的建议改进。

我想我已经把它钉了下来，但如果由于某种原因这与你想要的不一致，请随时告诉我。浮动表标题不会像它们下面的静态标题那样保留精确的位置，但宽度相同，并且在桌面上滚动看起来很平滑。在.header的CSS中，我添加了这个以使其更具代表性。

width:97%;
margin-left:1%;
margin-right:2%;

但有一件事引起了我的注意，我在 resizeFixed() 注意到了这一点：

$table_header_wrap.width($container.width() + 10);

我认为这是造成长桌标题（.blue和.purple）到＃34;挂掉＆＃34;桌子的右边。我改成了它。

$table_header_wrap.width($container.width() - 1);

现在浮动表标题与表格的主体对齐。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我希望这对你有所帮助。

Answer 4

<强>已更新

我修改了你的js来做你想做的事working fiddle

(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");
            });
            //resizing fix
            var table = $this;
            $(window).on('resize',function(){
                $t_fixed.css('width',table.width()+"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);
 });
});

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

4 个答案: