Fixed table title under fixed page title

Question

Fixed table title under fixed page title

The table title is fixed, but after scrolling it is at the top of the page. It works exactly the way I want, except that thead is fixed in the wrong place.

The table has overflow-x: auto, and TD uses white-space: nowrap, so the table expands to handle the content.

I need it to be fixed at 140 pixels on the top or right below the page title. I can’t figure out how to compensate for this ... It’s close, but you need to consider the overflow ...

Here is JSFIDDLE - https://jsfiddle.net/rbla/1Ljuycbe/1/

Look at the first table ... and the problem with OVERFLOW-X: AUTO - I need a cloned table to reflect this ...

JQuery

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


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

CSS

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

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

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

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

     .blue thead {
       background:#1ABC9C;
     }

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

.purple thead{
  background:#9B59B6;
}

thead {
  color:white;
}

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

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

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

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

.scrollMore {
  margin-top:10px;
}

.up {
  cursor:pointer;
}

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

 #pure {
   margin-top:200px;
 }

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

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

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

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

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

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

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

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

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

.blue thead {
  background: #1ABC9C;
}

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

.purple thead {
  background: #9B59B6;
}

thead {
  color: white;
}

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

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

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

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

.scrollMore {
  margin-top: 10px;
}

.up {
  cursor: pointer;
}

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

#pure {
  margin-top: 200px;
}

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

<div id="pure">

  <h1>Table Fixed Header</h1>

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

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



  <div class="container">

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

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

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

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

</div>

Run code Hide result

+6

javascript jquery html html5

Ronald 09 . '18 20:28

4

JSFiddle, . https://jsfiddle.net/g7wgp7gj/1/

, . CSS , .

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

+2

fl0psy 09 . '18 21:16

, .

, , - , , . , , , . CSS .header , .

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>

Hide result

, .

0

Tanner Babcock 02 . '18 23:47

I modified your js to do what you need a 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);
 });
});

0

CME64 Feb 06 '18 at 14:16

source share

Munim Munna · Accepted Answer · 2018-02-01T11:05:14+0000

.

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

Hide result

UPDATE

OP.

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

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

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

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

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

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

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

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

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

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

.blue thead {
  background: #1ABC9C;
}

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

.purple thead {
  background: #9B59B6;
}

thead {
  color: white;
}

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

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

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

.table_wrap {
  overflow-x: auto;
}

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

.scrollMore {
  margin-top: 10px;
}

.up {
  cursor: pointer;
}

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

#pure {
  margin-top: 200px;
}

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

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

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

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

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

</div>

Hide result

Fixed table title under fixed page title

More articles: