The table header is fixed, but it is at the top of the page after scrolling. It works exactly how I want it, except the thead is fixed in the wrong place.
The table has an overflow-x:auto and the TD are using white-space:nowrap so the table expands to handle the content.
I need it to be fixed 140 pixels from the top or right below the Page Header. I cant figure out how to offset this... Its close, but needs to take into account the overflow...
Here is JSFIDDLE - https://jsfiddle.net/rbla/1Ljuycbe/1/
Please look at the FIRST table... and the problem is with the OVERFLOW-X:AUTO - I need the cloned table to reflect this as well...
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>↓ SCROLL ↓</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">↓ SCROLL MORE ↓</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">↑ UP ↑</h2> </div>4 Answers
Answers 1
I've updated your JSFiddle to add those features. https://jsfiddle.net/g7wgp7gj/1/
The solution is to find and leverage the header's height in your calculations for when to display the floating table headers. This header height would also be used to dynamically set the floating table headers' "top" CSS property so it will be fixed under the header.
position: fixed; top: <header height>px; Answers 2
This fixs the header problem with scrolling the header.
(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>↓ SCROLL ↓</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">↓ SCROLL MORE ↓</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">↑ UP ↑</h2> </div>UPDATE
This is the fix with scrollbar at the bottom of the table as per OP demand.
(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>↓ SCROLL ↓</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">↓ SCROLL MORE ↓</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">↑ UP ↑</h2> </div>Answers 3
I think I got it nailed down, but if for some reason this is inconsistent with what you want, feel free to tell me. The floating table headings do not retain the exact positions as the static ones beneath them, but the widths are the same, and scrolling over the table looks smooth. In the CSS for .header, I added this to make it a bit more presentable.
width:97%; margin-left:1%; margin-right:2%; But one thing that caught my eye, I noticed this in resizeFixed():
$table_header_wrap.width($container.width() + 10); I believe this is what was causing the long table headings (.blue, and .purple) to "hang off" the right side of the table. I changed it to this.
$table_header_wrap.width($container.width() - 1); Now the floating table header lines up with the body of the table.
; (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>↓ SCROLL ↓</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">↓ SCROLL MORE ↓</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">↑ UP ↑</h2> </div>I hope this is of some help to you.
Answers 4
UPDATED
I have modified your js to do what you wanted 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 comments:
Post a Comment