表头固定在固定页面标题下方
[英]Table Header Fixed beneath Fixed Page Header
问题描述
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. 它完全按照我的要求工作，除了thead被固定在错误的地方。
The table has an overflow-x:auto and the TD are using white-space:nowrap so the table expands to handle the content. 该表有一个overflow-x：auto，而TD正在使用white-space：nowrap，因此表扩展以处理内容。
I need it to be fixed 140 pixels from the top or right below the Page Header. 我需要它从页眉的顶部或右下方固定140像素。 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/ 这是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... 请查看FIRST表...问题在于OVERFLOW-X：AUTO - 我需要克隆表来反映这一点......
JQUERY 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 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 个解决方案
解决方案1
2 2018-01-09 21:16:56
I've updated your JSFiddle to add those features. 我已经更新了你的JSFiddle以添加这些功能。 https://jsfiddle.net/g7wgp7gj/1/ 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. 此标头高度还将用于动态设置浮动表头的“顶部”CSS属性，以便将其固定在标头下。
position: fixed;
top: <header height>px;
解决方案2
2 已采纳 2018-02-01 11:05:14
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 UPDATE
This is the fix with scrollbar at the bottom of the table as per OP demand. 根据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>↓ 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>
解决方案3
0 2018-02-02 23:47:07
This is a suggested improvement on Munim Munna's accepted answer above. 这是Munim Munna上面接受的答案的建议改进。
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. 在.header的CSS中，我添加了这个以使其.header 。
width:97%;
margin-left:1%;
margin-right:2%;
But one thing that caught my eye, I noticed this in resizeFixed() : 但有一件事引起了我的注意，我在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. 我相信这是导致长桌标题（ .blue和.purple ）“悬挂”桌子右侧的原因。 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. 我希望这对你有所帮助。
解决方案4
0 2018-02-06 14:16:15
UPDATED 更新
I have modified your js to do what you wanted working fiddle 我已经修改了你的js来做你想做的小提琴
(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);
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
滚动页面时修复表格的标题 - Fixed header of a table when scroll through the page
带有固定标题的可滚动表格 - scrollable table with fixed header
数据表固定 header - data table fixed header
固定水平表标题 - Fixed horizontal table header
具有固定标题和滚动的表格 - table with fixed header and scroll
修复了AngularJS中的头表 - Fixed header table in AngularJS
具有固定标题和固定列的HTML数据表 - HTML Data Table with fixed header and fixed column
带有固定标题和固定列的HTML表格 - Html table with fixed header and fixed column both
如何使图像幻灯片显示在固定标题下方 - How can i make the image slideshow appear beneath a fixed header
滚动页面下方固定header - Scroll the page below the fixed header
相关标签