那些遇到过的问题

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

Ron*_*ald 6 html javascript jquery html5

表头是固定的,但在滚动后它位于页面的顶部.它完全按照我的要求工作,除了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);
   });
});
Run Code Online (Sandbox Code Playgroud)

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;
 }
Run Code Online (Sandbox Code Playgroud) 

;
(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);
  });
});
Run Code Online (Sandbox Code Playgroud) 
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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

Mun*_*nna 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);
  });
});
Run Code Online (Sandbox Code Playgroud) 
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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

更新

这是根据 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);
  });
});
Run Code Online (Sandbox Code Playgroud) 
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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
          &l

归档时间：

查看次数：

391 次

最近记录：

7 年，5 月 前
相关归档
如何在Javascript中为默认导入设置别名？ 307
node.js中的ES6变量导入名称？ 101
jQuery-UI的自动完成功能不能很好地显示z-index问题 81
Javascript按ID获取元素并设置值 69
默认显示的HTML元素:inline-block？ 64
在Web应用程序中使用True类型字体 48
如何修复Uncaught TypeError:无法读取未定义的属性'prototype'？ 36
HTML 5页脚标记始终位于底部 19
使用jquery验证表单输入字段 17
wysihtml5.图像src和href被剥离 7
难疑归档
什么是"大O"符号的简单英语解释？ 4851
最终C++书籍指南和列表 4246
如何列出提交中的所有文件？ 2619
如何检查对象是否是数组？ 2581
当用户将鼠标悬停在列表项上时,将光标置为手 1871
如何仅从SQL Server DateTime数据类型返回日期 1692
在Mac上查找(并终止)进程锁定端口3000 1595
什么是C++ 11中的lambda表达式？ 1408
如何设置HTML <select>元素的默认值？ 1343
谁正在侦听Mac OS X上的给定TCP端口？ 1267
Copyright Info

© Copyright 2013-2021 admin@qa.1r1g.com

如未特别说明，本网站的内容使用如下协议:
Creative Commons Atution-NonCommercial-ShareAlike 4.0 International license.

用以下方式浏览
参考资料
回到顶部
网安备44200002443738
粤ICP备19038133号