Tabla HTML desplazable con encabezado fijo y columna fija

Me gustaría crear una tabla con datos desplazables. Tengo que congelar la primera fila y la primera columna de la tabla. La primera fila y la primera columna de la tabla deben redimensionarse automáticamente en ancho y alto a las dimensiones de celda variable en el área de contenido de la tabla (porque el usuario agregará nuevas celdas de tabla con una cantidad variable de contenido).Tabla HTML desplazable con encabezado fijo y columna fija

Alguien hizo una pregunta relacionada: How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?

Pero el enlace para demostración en línea y el código fuente está muerto, así que no puedo confirmar la solución.

Fuente

2011-12-23 John

Ok, he leído muchas respuestas en la web y finalmente armé una demostración que funcionó. Estoy usando PHP para crear 50 filas en la tabla, pero también puedes codificar fácilmente los datos. En esencia, creo cuatro cuadrantes (div.q1, div.q2, div.q3 y div.q4), donde el cuarto cuadrante contiene la tabla de datos real. Usé jquery para copiar la tabla en el cuarto cuadrante en el segundo y tercer cuadrante antes de sincronizar sus barras de desplazamiento. Utilicé una combinación de desbordamiento CSS, ancho, alto y propiedades de visualización para ocultar elementos TD innecesarios en cada uno de los cuadrantes. Aquí está un ejemplo de trabajo completo:

<html> 
<head> 
<style> 
body {width:350px;} 
.q1, .q2, .q3, .q4 {overflow:hidden; display:block; float:left;} 
.q1 {width:50px; height: 30px;} 
.q2 {width:300px; height: 30px;} 
.q3 {width:50px; height: 100px;} 
.q4 {width:300px; height: 100px; overflow:auto;} 

.q2 .firstCol, .q3 thead, .q4 thead, .q4 .firstCol {display:none;} 
.q2 td {background-color:#999;} 
.q3 td {background-color:#999;} 
.container {width:9999px;} 

</style> 

<script src="http://code.jquery.com/jquery-1.7.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $('.q4').bind('scroll', fnscroll); 
    $('.q2').html($('.q4').html()); 
    $('.q3').html($('.q4').html()); 
}); 

function fnscroll(){ 

$('.q2').scrollLeft($('.q4').scrollLeft()); 
$('.q3').scrollTop($('.q4').scrollTop()); 


} 

</script> 
</head> 


<body> 
     <div class="q1"><div class="container"></div></div> 
     <div class="q2"><div class="container"></div></div> 
     <div class="q3"><div class="container"></div></div> 
     <div class="q4"> 
      <div class="container"> 
      <table> 
       <thead> 
        <tr> 
        <td class="firstCol"></td> 
        <td>Col</td> 
        <td>Col</td> 
        <td>Col</td> 
        <td>Col</td> 
        <td>Col</td> 
        <td>Col</td> 
        <td>Col</td> 
        <td>Col</td> 
        </tr> 
       </thead> 
       <tbody> 
       <?php for($c=0; $c<50; $c++) { ?> 
        <tr> 
        <td class="firstCol">Row</td> 
        <td>this is some content</td> 
        <td>hello world!<br/>This is good</td> 
        <td>Row</td> 
        <td>adjfljaf oj eoaifj </td> 
        <td>ajsdlfja oije</td> 
        <td>alsdfjaoj f</td> 
        <td>jadfioj</td> 
        <td>jalsdjf oai</td> 
        </tr> 
       <?php } ?> 
       </tbody> 
      </table> 
      </div> 
     </div> 
</body> 
</html>

Fuente

2011-12-23 22:41:23 John

esto es muy bueno. acabo de agregar un violín para esto aquí http://jsfiddle.net/9NcnH/ – dotnetcoder

¿cómo podemos ajustar el ancho de q3 de forma dinámica en función del contenido en lugar de establecerlo en 50px? – dotnetcoder

Usted rinde la mesa dos veces:

Una vez contenida en un div desplazable de su tamaño deseado
vez en un pequeño div, div no desplazable (overflow: hidden), que se coloca sobre la parte superior del otro, ocultando su fila superior pero no la barra de desplazamiento

Fuente

2011-12-23 20:18:34

Utilice la excelente jQuery Datables con la extensión FixedHeader.

Desplácese hacia abajo más allá de la fila del encabezado, y verá que se pegará perfectamente en la parte superior de la pantalla.

Para encabezado, pie de página, a la izquierda y la derecha emoción:

http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html

Fuente

2013-01-30 15:46:59

¡Guau! ¡Estaba buscando esto pero no me di cuenta de que estaba en la sección 'Extra' del sitio web de Datatables.net! – 321X

ese enlace está roto, ahora está en https://www.datatables.net/extensions/fixedheader/ – samson