Tabla - cabezal fijo, cuerpo desplazable, la solución más robusta/simple?

Duplicar posible:
HTML table with fixed headers?Tabla - cabezal fijo, cuerpo desplazable, la solución más robusta/simple?

Buscando una solución para crear una tabla con un cuerpo desplazable, y una cabecera estática/fija.

Buscando en parece producir MUCHAS piezas escamosas de código, o bien no funciona en IE, lo que requiere una enorme cantidad de Javascript y ajustar, o una cantidad ridícula de hacks CSS, etc.

Para ser honesto, si es un caso de CSS hacks o Javascript, creo que preferiría ir a la opción de Javascript.

La alternativa que supongo es colocar todo en un div, y simplemente desplazarse toda la tabla - pero eso es un poco ordinarios: D

Fuente

2009-08-19 Nick

Dup: http://stackoverflow.com/questions/673153/html-table-with-fixed-headers –

<table style="width: 300px" cellpadding="0" cellspacing="0"> 
<tr> 
    <td>Column 1</td> 
    <td>Column 2</td> 
</tr> 
</table> 

<div style="overflow: auto;height: 100px; width: 320px;"> 
    <table style="width: 300px;" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    </table> 
</div>

Esto crea un encabezado de columna fijo con la tabla desplazable debajo de él. El truco es incrustar la tabla que desea desplazar en una etiqueta con el atributo de desbordamiento establecido en automático. Esto obligará al navegador a mostrar una barra de desplazamiento cuando el contenido de la tabla interna sea más grande que la altura del entorno.

El ancho del exterior debe ser mayor que el ancho si la tabla interna se adapta a la barra de desplazamiento. Puede ser difícil hacerlo exactamente, porque algunos usuarios pueden haber configurado sus barras de desplazamiento para que sean más anchas o más pequeñas que las predeterminadas. Sin embargo, con una diferencia de alrededor de 20 a 30 píxeles, normalmente podrá mostrar la barra de desplazamiento correctamente.

CSS-Tricks también habla sobre el uso de JavaScript y CSS para ayudar con esto también para que pueda usar el resaltado. Aquí está el enlace a ese article.

Fuente

2009-08-19 16:26:10 Dennis

Aunque esto funciona, no es grande desde el punto de vista de la accesibilidad. No hay encabezados de tabla () e incluso si los hubiera, no se asociarían explícitamente con las columnas relevantes ya que la tabla se divide en dos tablas. –

Esto realmente es perfecto en realidad, si defino manualmente el ancho de cada columna - como dijo pmc, tal vez no sea ideal desde la accesibilidad, pero todas las soluciones que he visto, esto es por * ahora * mi favorito, muchas gracias ¡mucho! – Nick

Si su mesa está bien compacta, esto no parece salir bien. – quillbreaker

Creo que la solución es establecer una altura explícita para la tbody y establecer el desbordamiento automático o desplazarse. Desafortunadamente, como has descubierto, las tablas y CSS son una combinación difícil, y a IE le gusta asfixiarse.

Fuente

2009-08-19 16:21:51

Si puede corregir el ancho de las columnas, es mucho más fácil. Si desea que el navegador determine los anchos, se vuelve mucho más difícil. Básicamente, tenga la tabla en div que se desplaza (altura, desbordamiento: automático) y tenga ese div dentro de una posición: div relativa. En el div externo, tenga otra posición div: absoluta, desbordamiento: oculta, altura: sea cual sea la altura del encabezado, establezca elHTML interior de este div en elHTML interno del div interno; Aquí hay una página que demuestra. Hay un montón de trampas, pero es factible ...

<html> 
<head></head> 
<body onload="doit();"> 
<div id="outer" style="position:relative;"> 
    <div id="inner" style="height:100px; overflow:auto;"> 
    <script> 
     var html = '<table><tr><th>Heading 1</th><th>Heading 2</th></tr>'; 
     var width = Math.floor(Math.random() * 100); 
     var d = ''; 
     for(var i = 0; i < width; i++){d += 'a';} 
     for(var i = 0; i < 100; i++){ 
      html += '<tr><td>' + d + '</td><td>some more data</td>'; 
     } 
     html += '</table>'; 
     document.write(html); 
    </script> 
    </div> 
    <div id="secondWrapper" style="position:absolute; background:#fff; left:0; top:0; height:25px; overflow:hidden;"></div> 
</div> 

<script> 
function doit(){ 
    var inner = document.getElementById('inner'); 
    var secondWrapper = document.getElementById('secondWrapper'); 
    secondWrapper.innerHTML = inner.innerHTML; 
} 
</script> 
</body> 
</html>

Nota a medida que actualiza y cambia el tamaño de los datos, la cabecera coincide perfectamente. Ese es el verdadero truco.

Fuente

2009-08-20 06:25:38

No entiendo cómo funciona en absoluto, así que debe ser magia negra. Más en serio, tuve que jugar con la altura de mis etiquetas TH y la altura de secondWrapper para que funcione. También parece funcionar un poco mejor si la tabla tiene un ancho máximo de 98% o más, para evitar que la mesa y la barra de desplazamiento choquen entre sí. ¿Cómo se te ocurrió/de dónde sacaste esto? Es realmente inteligente. – quillbreaker

Nota para otros: si tiene una tabla con elementos editables, este método copia la tabla y copia los elementos. Usted ha sido advertido. – quillbreaker

Hay un * conjunto * de trampas. Después de trabajar con esto, creo que no es lo suficientemente estable como para usar en cualquier código de producción. Sin embargo, es demasiado tarde para cambiar mi voto de esta respuesta, lo cual es una lástima. – quillbreaker

También hubo una prueba para este tipo de cosas en Sitepoint, para aquellos que buscan una solución que no sea JS. Sin embargo, descubrí que el pie de página de la tabla era necesario para evitar que los encabezados de la tabla colapsaran sus anchuras SI el contenido de las celdas no era lo suficientemente ancho. Terminé ocultándome en la aplicación en la que utilicé esto.
Es HTML/CSS puro y funciona en IE6 además de los navegadores modernos. Sin embargo, hay algunas limitaciones de estilo para el encabezado.

Fuente

2009-08-20 13:08:02

Acabo de armar un plugin jQuery que hace exactamente lo que quiere. Es muy pequeño en tamaño y muy fácil de implementar.

Todo lo que se requiere es una tabla que tenga un tad y un tad.

Puede envolver esa tabla en un DIV con un nombre de clase y la tabla siempre se redimensionará para caber en ese div. entonces, por ejemplo, si su div se escala con la ventana del navegador, también lo hará la tabla. El encabezado se arreglará cuando se desplaza. El pie de página será fijo (si habilita un pie de página). También tiene la opción de clonar el encabezado en el pie de página y arreglarlo. Además, si la ventana de su navegador es demasiado pequeña y todas las columnas no caben ... también se desplazará horizontalmente (encabezado también).

Este complemento permite al navegador dimensionar las columnas para que no sean columnas de ancho fijo.

acaba de pasar el nombre de clase del DIV al complemento como lo siguiente: $ ('. MyDiv'). FixedHeaderTable ({footer: true, footerId: 'myFooterId'}); y el complemento hará el resto. FooterID es un elemento en la página que contiene el marcado para su pie de página. esto se usa si quiere tener paginación como pie de página.

Si tiene varias tablas en la página, también funcionará para cada tabla que desee tener un encabezado fijo.

echarle un vistazo aquí: http://fixedheadertable.mmalek.com/

Tenga en cuenta que su todavía 'beta' por lo que estoy añadiendo nuevas características y correcciones de errores diaria.

navegadores soportados: IE6, IE7, IE8, Firefox, Safari y Chrome

Aquí hay un enlace a mi respuesta a otra persona que tenía la misma pregunta: Frozen table header inside scrollable div

Fuente

2009-10-07 19:22:39 Mark

¿Qué tal esto:

<table style="width: 400px;"> 
<thead><tr> <th> head </th> </tr> 
</thead> 
<tbody style="height: 100px; overflow-y: auto; overflow-x: hidden;"> 
<tr> <th> .. </th> </tr> 
</tbody> 
</table>

Fuente

2011-05-26 18:34:53 goth

Una buena idea, pero no funciona: http://jsfiddle.net/f22uoxqb/ – simmer

Tabla - cabezal fijo, cuerpo desplazable, la solución más robusta/simple?

Respuesta

Cuestiones relacionadas