Cabeçalho da tabela para ficar fixo no topo quando o usuário o desloca fora de vista com jQuery
estou a tentar desenhar uma tabela HTML onde o cabeçalho ficará no topo da página, quando e apenas quando o utilizador a deslocar fora de vista. Por exemplo, a tabela pode ser de 500 pixels para baixo da página, Como faço para que se o usuário scrolls o cabeçalho fora de vista (navegador detecta o seu não mais na vista do windows de alguma forma), ele vai ficar no topo? Alguém me pode dar uma solução Javascript para isto?
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
Por isso, no exemplo acima, quero que o <thead>
se desloque com a página se ficar fora de vista.
importante: eu não estouà procura de uma solução onde o <tbody>
terá uma barra de posicionamento (overflow:auto).
21 answers
Você faria uma coisa destas se ligasse ao scroll
manipulador de eventos em window
, e usasse outro table
com uma posição fixa para mostrar o cabeçalho no topo da página.
HTML:
<table id="header-fixed"></table>
CSS:
#header-fixed {
position: fixed;
top: 0px; display:none;
background-color:white;
}
JavaScript:
var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
}
else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
Isto irá mostrar a cabeça da mesa quando o utilizador deslizar para baixo o suficiente para esconder a cabeça da mesa original. Irá esconder-se novamente quando o utilizador tiver desenrolado a página suficientemente longe Outra vez.
Exemplo de trabalho: http://jsfiddle.net/andrewwhitaker/fj8wM/HTML
<div id="table-container">
<table id="maintable">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>some really long line here instead</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
<div id="bottom_anchor"></div>
</div>
CSS
body { height: 1000px; }
thead{
background-color:white;
}
Javascript
function moveScroll(){
var scroll = $(window).scrollTop();
var anchor_top = $("#maintable").offset().top;
var anchor_bottom = $("#bottom_anchor").offset().top;
if (scroll>anchor_top && scroll<anchor_bottom) {
clone_table = $("#clone");
if(clone_table.length == 0){
clone_table = $("#maintable").clone();
clone_table.attr('id', 'clone');
clone_table.css({position:'fixed',
'pointer-events': 'none',
top:0});
clone_table.width($("#maintable").width());
$("#table-container").append(clone_table);
$("#clone").css({visibility:'hidden'});
$("#clone thead").css({'visibility':'visible','pointer-events':'auto'});
}
} else {
$("#clone").remove();
}
}
$(window).scroll(moveScroll);
Veja aqui: http://jsfiddle.net/QHQGF/7/
Editar: actualizou o código para que o thead pode receber eventos de ponteiros (então botões e links no cabeçalho ainda funcionam). Isso corrige o problema relatado por luhfluh e Joe M.
Novo jsfiddle aqui: http://jsfiddle.net/cjKEx/
$("#header-fixed td").each(function(index){
var index2 = index;
$(this).width(function(index2){
return $("#table-1 td").eq(index).width();
});
});
Isto resolve o problema sem ter de clonar a mesa inteira e esconder o corpo. Eu sou novinho em folha para JavaScript e jQuery (e para stack overflow), então todos os comentários são apreciados.
Escrevi um plugin que faz isto. Tenho trabalhado nisso há cerca de um ano e acho que ele lida com todos os casos de canto muito bem:
- rolando dentro de um recipiente com excesso
- a deslocar-se dentro de uma janela
- a tomar conta do que acontece quando redimensiona a janela
- mantendo os seus eventos ligados ao cabeçalho
- O mais importante é que não te obriga a mudar o css da tua mesa para que funcione.
http://mkoryak.github.io/floatThead/
Actualização 5/11: erro fixo de deslocamento horizontal, tal como indicado por Kerry Johnson
Codepen: https://codepen.io/josephting/pen/demELL
;(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.width($this.outerWidth());
$t_fixed.find("th").each(function(index) {
$(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
});
}
function scrollFixed() {
var offsetY = $(this).scrollTop(),
offsetX = $(this).scrollLeft(),
tableOffsetTop = $this.offset().top,
tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height(),
tableOffsetLeft = $this.offset().left;
if(offsetY < tableOffsetTop || offsetY > tableOffsetBottom)
$t_fixed.hide();
else if(offsetY >= tableOffsetTop && offsetY <= tableOffsetBottom && $t_fixed.is(":hidden"))
$t_fixed.show();
$t_fixed.css("left", tableOffsetLeft - offsetX + "px");
}
$(window).resize(resizeFixed);
$(window).scroll(scrollFixed);
init();
});
};
})(jQuery);
$(document).ready(function(){
$("table").fixMe();
$(".up").click(function() {
$('html, body').animate({
scrollTop: 0
}, 2000);
});
});
body{
font:1.2em normal Arial,sans-serif;
color:#34495E;
}
h1{
text-align:center;
text-transform:uppercase;
letter-spacing:-2px;
font-size:2.5em;
margin:20px 0;
}
.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;
}
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:600px;
}
.up{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>↓ SCROLL ↓</h1>
<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>MaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</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>
<h1 class="scrollMore">↓ SCROLL MORE ↓</h1>
<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>
<h1 class="up scrollMore">↑ UP ↑</h1>
CSS puro (sem IE e suporte de bordo em maio de 2017):
table thead {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 5;
background: #fff;
}
A melhor solução é usar este plugin jquery:
Https://github.com/jmosbech/StickyTableHeaders
Este plugin funcionou muito bem para nós e nós tentamos muitas outras soluções. Testámo-lo em IE, cromado e Firefox.
Http://plugins.jquery.com/StickyTableHeaders/
Informação de Utilização aqui: https://github.com/jmosbech/StickyTableHeaders
Bem, depois de rever todas as soluções disponíveis eu escrevi plugin que pode congelar qualquer linha (não apenas th) no topo da página ou container. É muito simples e muito rápido. Podes usá-lo à vontade. http://maslianok.github.io/stickyRows/
Eu também experimentei os mesmos problemas com a formatação de fronteiras não sendo mostrada usando o código de entrophy, mas algumas pequenas correções e agora a tabela é expansível e mostra todas as regras de estilo css que você pode adicionar.
Ao css adicionar:
#maintable{width: 100%}
Então aqui está o novo javascript:
function moveScroll(){
var scroll = $(window).scrollTop();
var anchor_top = $("#maintable").offset().top;
var anchor_bottom = $("#bottom_anchor").offset().top;
if (scroll > anchor_top && scroll < anchor_bottom) {
clone_table = $("#clone");
if(clone_table.length === 0) {
clone_table = $("#maintable").clone();
clone_table.attr({id: "clone"})
.css({
position: "fixed",
"pointer-events": "none",
top:0
})
.width($("#maintable").width());
$("#table-container").append(clone_table);
// dont hide the whole table or you lose border style &
// actively match the inline width to the #maintable width if the
// container holding the table (window, iframe, div) changes width
$("#clone").width($("#maintable").width());
// only the clone thead remains visible
$("#clone thead").css({
visibility:"visible"
});
// clone tbody is hidden
$("#clone tbody").css({
visibility:"hidden"
});
// add support for a tfoot element
// and hide its cloned version too
var footEl = $("#clone tfoot");
if(footEl.length){
footEl.css({
visibility:"hidden"
});
}
}
}
else {
$("#clone").remove();
}
}
$(window).scroll(moveScroll);
Utilização
Certifique-se que a sua mesa tem uma marca <thead>
porque só o conteúdo do AD será corrigido.
$("#header-fixed").fixHeader();
JavaSript
//Custom JQuery Plugin
(function ($) {
$.fn.fixHeader = function () {
return this.each(function () {
var $table = $(this);
var $sp = $table.scrollParent();
var tableOffset = $table.position().top;
var $tableFixed = $("<table />")
.prop('class', $table.prop('class'))
.css({ position: "fixed", "table-layout": "fixed", display: "none", "margin-top": "0px" });
$table.before($tableFixed);
$tableFixed.append($table.find("thead").clone());
$sp.bind("scroll", function () {
var offset = $(this).scrollTop();
if (offset > tableOffset && $tableFixed.is(":hidden")) {
$tableFixed.show();
var p = $table.position();
var offset = $sp.offset();
//Set the left and width to match the source table and the top to match the scroll parent
$tableFixed.css({ left: p.left + "px", top: (offset ? offset.top : 0) + "px", }).width($table.width());
//Set the width of each column to match the source table
$.each($table.find('th, td'), function (i, th) {
$($tableFixed.find('th, td')[i]).width($(th).width());
});
}
else if (offset <= tableOffset && !$tableFixed.is(":hidden")) {
$tableFixed.hide();
}
});
});
};
})(jQuery);
Isto irá ajudá-lo a ter um cabeçalho fixo que também pode ser desenrolado horizontalmente com os dados.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Shubh</title>
<script type="text/javascript">
var lastSeen = [ 0, 0 ];
function checkScroll(div1, div2) {
if (!div1 || !div2)
return;
var control = null;
if (div1.scrollLeft != lastSeen[0])
control = div1;
else if (div2.scrollLeft != lastSeen[1])
control = div2;
if (control == null)
return;
else
div1.scrollLeft = div2.scrollLeft = control.scrollLeft;
lastSeen[0] = div1.scrollLeft;
lastSeen[1] = div2.scrollLeft;
}
window
.setInterval(
"checkScroll(document.getElementById('innertablediv'), document.getElementById('headertable'))",
1);
</script>
<style type="text/css">
#full {
width: 400px;
height: 300px;
}
#innertablediv {
height: 200px;
overflow: auto;
}
#headertable {
overflow: hidden;
}
</style>
</head>
<body>
<div id="full">
<div id="headertable">
<table border="1" bgcolor="grey" width="150px" id="headertable">
<tr>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td> </td>
</tr>
</table>
</div>
<div id="innertablediv">
<table border="1" id="innertableid">
<tr>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
</tr>
<tr>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
</tr>
<tr>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
</tr>
<tr>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
</tr>
<tr>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
</tr>
<tr>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
</tr>
<tr>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
</tr>
<tr>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
</tr>
<tr>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
<td>shubh, ansh</td>
</tr>
</table>
</div>
</div>
</body>
</html>
function fix_table_header_position(){
var width_list = [];
$("th").each(function(){
width_list.push($(this).width());
});
$("tr:first").css("position", "absolute");
$("tr:first").css("z-index", "1000");
$("th, td").each(function(index){
$(this).width(width_list[index]);
});
$("tr:first").after("<tr height=" + $("tr:first").height() + "></tr>");}
Esta é a minha solução
Um pouco tarde para a festa, mas aqui está uma implementação que funciona com várias tabelas na mesma página e "jank" livre (usando requestAnimationFrame). Também não há necessidade de fornecer qualquer largura nas colunas. A rolagem Horizontal também funciona.
Os cabeçalhos estão definidos num div
por isso, pode adicionar qualquer marca aí (como botões), se necessário. Este é todo o HTML que é necessário:
<div class="tbl-resp">
<table id="tbl1" class="tbl-resp__tbl">
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
</tr>
</thead>
</table>
</div>
Nesta solução o cabeçalho fixo é criado dinamicamente, o conteúdo e o estilo são clonados a partir do THEAD
Só precisas de duas linhas, por exemplo:
var $myfixedHeader = $("#Ttodo").FixedHeader(); //create fixed header
$(window).scroll($myfixedHeader.moveScroll); //bind function to scroll event
O meu 'plugin' jquery consertou a cabeça e getStyleObject fornecido abaixo você pode colocar no arquivo .js
// JAVASCRIPT
/*
* getStyleObject Plugin for jQuery JavaScript Library
* From: http://upshots.org/?p=112
Basic usage:
$.fn.copyCSS = function(source){
var styles = $(source).getStyleObject();
this.css(styles);
}
*/
(function($){
$.fn.getStyleObject = function(){
var dom = this.get(0);
var style;
var returns = {};
if(window.getComputedStyle){
var camelize = function(a,b){
return b.toUpperCase();
};
style = window.getComputedStyle(dom, null);
for(var i = 0, l = style.length; i < l; i++){
var prop = style[i];
var camel = prop.replace(/\-([a-z])/g, camelize);
var val = style.getPropertyValue(prop);
returns[camel] = val;
};
return returns;
};
if(style = dom.currentStyle){
for(var prop in style){
returns[prop] = style[prop];
};
return returns;
};
return this.css();
}
})(jQuery);
//Floating Header of long table PiotrC
(function ( $ ) {
var tableTop,tableBottom,ClnH;
$.fn.FixedHeader = function(){
tableTop=this.offset().top,
tableBottom=this.outerHeight()+tableTop;
//Add Fixed header
this.after('<table id="fixH"></table>');
//Clone Header
ClnH=$("#fixH").html(this.find("thead").clone());
//set style
ClnH.css({'position':'fixed', 'top':'0', 'zIndex':'60', 'display':'none',
'border-collapse': this.css('border-collapse'),
'border-spacing': this.css('border-spacing'),
'margin-left': this.css('margin-left'),
'width': this.css('width')
});
//rewrite style cell of header
$.each(this.find("thead>tr>th"), function(ind,val){
$(ClnH.find('tr>th')[ind]).css($(val).getStyleObject());
});
return ClnH;}
$.fn.moveScroll=function(){
var offset = $(window).scrollTop();
if (offset > tableTop && offset<tableBottom){
if(ClnH.is(":hidden"))ClnH.show();
$("#fixH").css('margin-left',"-"+$(window).scrollLeft()+"px");
}
else if (offset < tableTop || offset>tableBottom){
if(!ClnH.is(':hidden'))ClnH.hide();
}
};
})( jQuery );
var $myfixedHeader = $("#repTb").FixedHeader();
$(window).scroll($myfixedHeader.moveScroll);
/* CSS - important only NOT transparent background */
#repTB{border-collapse: separate;border-spacing: 0;}
#repTb thead,#fixH thead{background: #e0e0e0 linear-gradient(#d8d8d8 0%, #e0e0e0 25%, #e0e0e0 75%, #d8d8d8 100%) repeat scroll 0 0;border:1px solid #CCCCCC;}
#repTb td{border:1px solid black}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>example</h3>
<table id="repTb">
<thead>
<tr><th>Col1</th><th>Column2</th><th>Description</th></tr>
</thead>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
</table>
Criar uma tabela extra com o mesmo cabeçalho que a tabela principal. Basta colocar o AD na nova mesa com uma linha e todos os cabeçalhos nela. Faça posição absoluta e fundo branco. Para a tabela principal colocá-lo em um div e usar alguma altura e excesso de deslocamento Y. Desta forma, a nossa nova mesa irá superar o cabeçalho da mesa principal e ficar lá. Cerquem tudo num div. Abaixo está o código áspero para fazê-lo.
<div class="col-sm-8">
<table id="header-fixed" class="table table-bordered table-hover" style="width: 351px;position: absolute;background: white;">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
</table>
<div style="height: 300px;overflow-y: scroll;">
<table id="tableMain" class="table table-bordered table-hover" style="table-layout:fixed;overflow-wrap: break-word;cursor:pointer">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
</div>
</div>
Pode usar esta abordagem, puro HTML e CSS não são necessários JS:)
.table-fixed-header {
display: flex;
justify-content: space-between;
margin-right: 18px
}
.table-fixed {
display: flex;
justify-content: space-between;
height: 150px;
overflow: scroll;
}
.column {
flex-basis: 24%;
border-radius: 5px;
padding: 5px;
text-align: center;
}
.column .title {
border-bottom: 2px grey solid;
border-top: 2px grey solid;
text-align: center;
display: block;
font-weight: bold;
}
.cell {
padding: 5px;
border-right: 1px solid;
border-left: 1px solid;
}
.cell:nth-of-type(even) {
background-color: lightgrey;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fixed header Bin</title>
</head>
<body>
<div class="table-fixed-header">
<div class="column">
<span class="title">col 1</span>
</div>
<div class="column">
<span class="title">col 2</span>
</div>
<div class="column">
<span class="title">col 3</span>
</div>
<div class="column">
<span class="title">col 4</span>
</div>
</div>
<div class="table-fixed">
<div class="column">
<div class="cell">alpha</div>
<div class="cell">beta</div>
<div class="cell">ceta</div>
</div>
<div class="column">
<div class="cell">alpha</div>
<div class="cell">beta</div>
<div class="cell">ceta</div>
<div class="cell">alpha</div>
<div class="cell">beta</div>
<div class="cell">ceta</div>
<div class="cell">alpha</div>
<div class="cell">beta</div>
<div class="cell">ceta</div>
</div>
<div class="column">
<div class="cell">alpha</div>
<div class="cell">beta</div>
<div class="cell">ceta</div>
<div class="cell">beta</div>
<div class="cell">beta</div>
<div class="cell">beta</div>
</div>
<div class="column">
<div class="cell">alpha</div>
<div class="cell">beta</div>
<div class="cell">ceta</div>
</div>
</div>
</body>
</html>
div.wrapper {
padding:20px;
}
table.scroll thead {
width: 100%;
background: #FC6822;
}
table.scroll thead tr:after {
content: '';
overflow-y: scroll;
visibility: hidden;
}
table.scroll thead th {
flex: 1 auto;
display: block;
color: #fff;
}
table.scroll tbody {
display: block;
width: 100%;
overflow-y: auto;
height: auto;
max-height: 200px;
}
table.scroll thead tr,
table.scroll tbody tr {
display: flex;
}
table.scroll tbody tr td {
flex: 1 auto;
word-wrap: break;
}
table.scroll thead tr th,
table.scroll tbody tr td {
width: 25%;
padding: 5px;
text-align-left;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
<div class="wrapper">
<table border="0" cellpadding="0" cellspacing="0" class="scroll">
<thead>
<tr>
<th>Name</th>
<th>Vorname</th>
<th>Beruf</th>
<th>Alter</th>
</tr>
</thead>
<tbody>
<tr>
<td>Müller</td>
<td>Marie</td>
<td>Künstlerin</td>
<td>26</td>
</tr>
<tr>
<td>Meier</td>
<td>Stefan</td>
<td>Chemiker</td>
<td>52</td>
</tr>
<tr>
<td>Schmidt</td>
<td>Sabrine</td>
<td>Studentin</td>
<td>38</td>
</tr>
<tr>
<td>Mustermann</td>
<td>Max</td>
<td>Lehrer</td>
<td>41</td>
</tr>
<tr>
<td>Müller</td>
<td>Marie</td>
<td>Künstlerin</td>
<td>26</td>
</tr>
<tr>
<td>Meier</td>
<td>Stefan</td>
<td>Chemiker</td>
<td>52</td>
</tr>
<tr>
<td>Schmidt</td>
<td>Sabrine</td>
<td>Studentin</td>
<td>38</td>
</tr>
<tr>
<td>Mustermann</td>
<td>Max</td>
<td>Lehrer</td>
<td>41</td>
</tr>
<tr>
<td>Müller</td>
<td>Marie</td>
<td>Künstlerin</td>
<td>26</td>
</tr>
<tr>
<td>Meier</td>
<td>Stefan</td>
<td>Chemiker</td>
<td>52</td>
</tr>
<tr>
<td>Schmidt</td>
<td>Sabrine</td>
<td>Studentin</td>
<td>38</td>
</tr>
<tr>
<td>Mustermann</td>
<td>Max</td>
<td>Lehrer</td>
<td>41</td>
</tr>
</tbody>
</table>
</div>
Demonstração: demonstração do cabeçalho fixo da tabela css
Isto pode ser conseguido usando a transformação de propriedade de estilo. Tudo o que você tem a fazer é envolver a sua mesa em algum div com altura fixa e transbordamento definido para auto, por exemplo:
.tableWrapper {
overflow: auto;
height: calc( 100% - 10rem );
}
E então você pode anexar o manipulador onscroll a ele, aqui você tem um método que encontra cada tabela embrulhada com <div class="tableWrapper"></div>
:
fixTables () {
document.querySelectorAll('.tableWrapper').forEach((tableWrapper) => {
tableWrapper.addEventListener('scroll', () => {
var translate = 'translate(0,' + tableWrapper.scrollTop + 'px)'
tableWrapper.querySelector('thead').style.transform = translate
})
})
}
E aqui está o exemplo de trabalho disto em ação (eu usei bootstrap para torná-lo mais bonito): fiddle
Para aqueles que também querem apoiar IE e Edge, aqui está o trecho:
fixTables () {
const tableWrappers = document.querySelectorAll('.tableWrapper')
for (let i = 0, len = tableWrappers.length; i < len; i++) {
tableWrappers[i].addEventListener('scroll', () => {
const translate = 'translate(0,' + tableWrappers[i].scrollTop + 'px)'
const headers = tableWrappers[i].querySelectorAll('thead th')
for (let i = 0, len = headers.length; i < len; i++) {
headers[i].style.transform = translate
}
})
}
}
No pergaminho IE e Edge é um pouco lamechas... mas funciona. Aqui está a resposta que me ajuda a descobrir isto:
Grelhas CSS
Com as grelhas CSS, você pode definir uma 'grelha', e você pode finalmente criar uma solução de navegação cruzada, livre de javascript para uma tabela com um cabeçalho fixo e conteúdo controlável. A altura do cabeçalho pode até ser dinâmica.
CSS: mostrar como grelha e definir o número de template-rows
:
.grid {
display: grid;
grid-template-rows: 50px auto; // For fixed height header
grid-template-rows: auto auto; // For dynamic height header
}
HTML : criar um Contentor de grelha e o número de rows
:
<div class="grid">
<div></div>
<div></div>
</div>
Aqui está o exemplo de trabalho:
CSS
body {
margin: 0px;
padding: 0px;
text-align: center;
}
.table {
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 50px auto;
}
.table-heading {
background-color: #ddd;
}
.table-content {
overflow-x: hidden;
overflow-y: scroll;
}
HTML
<html>
<head>
</head>
<body>
<div class="table">
<div class="table-heading">
HEADING
</div>
<div class="table-content">
CONTENT - CONTENT - CONTENT <br/>
CONTENT - CONTENT - CONTENT <br/>
CONTENT - CONTENT - CONTENT <br/>
CONTENT - CONTENT - CONTENT <br/>
CONTENT - CONTENT - CONTENT <br/>
CONTENT - CONTENT - CONTENT <br/>
</div>
</div>
</body>
</html>
Eu tentei usando transformação: traduza . Embora funcione bem no Firefox e no Chrome, não há simplesmente nenhuma função na IE11. Sem barras duplas. Suporta table tfoot e legenda. Javascript puro, sem jQuery.
Http://jsfiddle.net/wbLqzrfb/42/
thead.style.transform="translate(0,"+(dY-top-1)+"px)";