data - jquery each table td

El encabezado de la tabla permanece fijo en la parte superior cuando el usuario lo desplaza fuera de la vista con jQuery (21)

Estoy intentando diseñar una tabla HTML donde el encabezado permanecerá en la parte superior de la página Y SÓLO cuando el usuario lo desplace fuera de la vista. Por ejemplo, la tabla puede estar a 500 píxeles de la página, ¿cómo hago para que si el usuario desplaza el encabezado fuera de la vista (el navegador detecta que ya no está en la vista de Windows de alguna manera), se mantendrá en la parte superior ? ¿Alguien puede darme una solución de Javascript para esto?

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

Entonces en el ejemplo anterior, quiero que <thead> desplace con la página si se sale de la vista.

IMPORTANTE: NO estoy buscando una solución donde <tbody> tenga una barra de desplazamiento (desbordamiento: automático).

Aquí hay una solución que se basa en la respuesta aceptada. Corrige por: anchos de columna, estilo de tabla coincidente, y cuando la tabla se desplaza en un contenedor div.

Uso

Asegúrese de que su tabla tenga una etiqueta <thead> porque solo se fijará el contenido.

$("#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);

Bueno, después de revisar todas las soluciones disponibles escribí un complemento que puede congelar cualquier fila (no solo th) en la parte superior de la página o el contenedor. Es muy simple y muy rápido. Sientase libre de usarlo. http://maslianok.github.io/stickyRows/

Bueno, estaba tratando de obtener el mismo efecto sin recurrir a columnas de tamaño fijo o tener una altura fija para toda la mesa.

La solución que se me ocurrió es un truco. Consiste en duplicar toda la tabla y luego ocultar todo menos el encabezado, y hacer que tenga una posición fija.

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

Vea aquí: http://jsfiddle.net/QHQGF/7/

Editar: actualizó el código para que thead pueda recibir eventos de puntero (para que los botones y enlaces en el encabezado aún funcionen). Esto soluciona el problema informado por luhfluh y Joe M.

Nueva jsfiddle aquí: http://jsfiddle.net/cjKEx/

Cree una tabla adicional con el mismo encabezado que la tabla principal. Solo ponga thead en la nueva tabla con una fila y todos los encabezados. Hacer posición absoluta y fondo blanco. Para la tabla principal ponlo en un div y usa algo de altura y overflow-y scroll. De esta manera, nuestra nueva mesa superará el encabezado de la mesa principal y permanecerá allí. Rodea todo en un div. A continuación está el código aproximado para hacerlo.

En esta solución, el encabezado fijo se crea dinámicamente, el contenido y el estilo se clonan desde THEAD

todo lo que necesitas son dos líneas, por ejemplo:

var $myfixedHeader = $("#Ttodo").FixedHeader(); //create fixed header $(window).scroll($myfixedHeader.moveScroll); //bind function to scroll event

Mi jquery plugin FixedHeader y getStyleObject que se proporcionan a continuación pueden poner el archivo .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}

Encontré una biblioteca jQuery simple llamada Encabezados de tabla adhesivos. Dos líneas de código e hizo exactamente lo que yo quería. Las soluciones anteriores no administran los anchos de columna, por lo que si tiene celdas de tabla que ocupan mucho espacio, el tamaño resultante del encabezado persistente no coincidirá con el ancho de su tabla.

http://plugins.jquery.com/StickyTableHeaders/

Información de uso aquí: https://github.com/jmosbech/StickyTableHeaders

Escribí un complemento que hace esto. He estado trabajando en ello durante aproximadamente un año y creo que maneja muy bien todos los casos de esquina:

desplazarse dentro de un contenedor con desbordamiento
desplazarse dentro de una ventana
cuidando lo que sucede cuando cambia el tamaño de la ventana
manteniendo sus eventos vinculados al encabezado
lo más importante es que no te obliga a cambiar el CSS de la mesa para que funcione

Aquí hay algunos demos / documentos:
mkoryak.github.io/floatThead

Esta es de lejos la mejor solución que he encontrado para tener un encabezado de tabla fijo.

ACTUALIZACIÓN 5/11: se corrigió el error de desplazamiento horizontal como lo señaló 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; }

Esto se puede lograr mediante el uso de la transformación de propiedades de estilo. Todo lo que tiene que hacer es envolver su tabla en algún div con altura fija y desbordamiento establecido en automático, por ejemplo:

.tableWrapper { overflow: auto; height: calc( 100% - 10rem ); }

And then you can attach onscroll handler to it, here you have method that finds each table wrapped with <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 }) }) }

And here is working example of this in action (i have used bootstrap to make it prettier): fiddle

For those who also want to support IE and Edge, here is the snippet:

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 } }) } }

In IE and Edge scroll is a little bit laggy... but it works

Here is answer which helps me to find out this: answer

Esto te ayudará a tener un encabezado fijo que también se puede desplazar horizontalmente con datos.

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

La mejor solución es usar este plugin jquery:

https://github.com/jmosbech/StickyTableHeaders

Este plugin funcionó muy bien para nosotros y probamos muchas otras soluciones. Lo probamos en IE, Chrome y Firefox

Para hacer algo como esto, toque el controlador de eventos de scroll en la window y use otra table con una posición fija para mostrar el encabezado en la parte superior de la 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(); } });

Esto mostrará el encabezado de la tabla cuando el usuario se desplace lo suficiente para ocultar el encabezado de la tabla original. Se volverá a ocultar cuando el usuario haya desplazado la página lo suficiente otra vez.

Ejemplo de trabajo: http://jsfiddle.net/andrewwhitaker/fj8wM/

Pude solucionar el problema con el cambio de ancho de columna. Comencé con la solución de Andrew anterior (¡muchas gracias!) Y luego agregué un pequeño bucle para establecer el ancho de las td clonadas:

$("#header-fixed td").each(function(index){ var index2 = index; $(this).width(function(index2){ return $("#table-1 td").eq(index).width(); }); });

Esto resuelve el problema sin tener que clonar toda la tabla y ocultar el cuerpo. Soy nuevo en JavaScript y jQuery (y para desbordar la pila), por lo que cualquier comentario es apreciado.

Pure CSS (sin soporte de IE y Edge en mayo de 2017):

table thead { position: -webkit-sticky; position: sticky; top: 0; z-index: 5; background: #fff; }

Un poco tarde para la fiesta, pero aquí hay una implementación que funciona con varias tablas en la misma página y "jank" gratis (usando requestAnimationFrame). Además, no es necesario proporcionar ningún ancho en las columnas. El desplazamiento horizontal también funciona.

Los encabezados están definidos en un div por lo que puede agregar cualquier marcado allí (como botones), si es necesario. Esto es todo el HTML que se necesita:

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

https://jsfiddle.net/lloydleo/bk5pt5gs/

Yo también experimenté los mismos problemas con el formato de borde que no se muestra con el código de entrophy, pero con unas pocas correcciones y ahora la tabla es ampliable y muestra todas las reglas de estilo de css que puede agregar.

para css agregar:

#maintable{width: 100%}

entonces aquí está el nuevo javascript:

puedes usar este enfoque, HTML puro y CSS sin necesidad de 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>

I have tried it using transformation:translate . While it works good in Firefox and Chrome, there is simply no function in IE11. No double scroll bars. Supports table tfoot and caption. Pure Javascript, no jQuery.

http://jsfiddle.net/wbLqzrfb/42/

thead.style.transform="translate(0,"+(dY-top-1)+"px)";

I''ve tried most of these solutions, and eventually found (IMO) the best, modern, solution:

CSS grids

With CSS grids, you can define a ''grid'', and you can finally create a nice, javascript-free, cross-browser solution for a table with a fixed header, and scrollable content. The header height can even dynamic.

CSS : Display as grid, and set the number of template-rows :

.grid { display: grid; grid-template-rows: 50px auto; // For fixed height header grid-template-rows: auto auto; // For dynamic height header }

HTML : Create a grid container and the number of defined rows :

<div class="grid"> <div></div> <div></div> </div>

Here is working example:

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>

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>

Demostración: demostración del encabezado de tabla fija css

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 es mi solución