javascript - thead - Tabla HTML con encabezados fijos y una columna fija

tabla con header fijo y scroll(horizontal y vertical)

Question

¿Existe una técnica de CSS / JavaScript para mostrar una tabla HTML larga de manera que los encabezados de columna permanezcan fijos en la pantalla y el primer coloumn permanezca fijo y se desplace con los datos?

Quiero poder desplazarme por el contenido de la tabla, pero siempre ser capaz de ver los encabezados de columna en la parte superior y la primera columna a la izquierda.

Si hay un plugin jQuery, ¡sería genial! Si ayuda, el único navegador que me importa es Firefox.

Answer 1

¡Aquí hay un buen complemento jQuery, que funciona en todos los navegadores!

Tienes una tabla de cabecera fija sin fijar su ancho.

Verifíquelo: https://github.com/benjaminleouzon/tablefixedheader

Descargo de responsabilidad: soy el autor del complemento.

Answer 2

Ejemplo de trabajo del enlace publicado por pranav :

http://jsbin.com/nolanole/1/edit?html,js,output

FYI: Probado en IE 6, 7 y 8 (modo de compatibilidad activado o desactivado), FF 3 y 3.5, Chrome 2. No compatible con el lector de pantalla (los encabezados no forman parte de la tabla de contenido).

EDITAR 5/5/14: movió el ejemplo a jsBin. Esto es viejo, pero sorprendentemente funciona en Chrome actual, IE y Firefox (aunque IE y Firefox pueden requerir algunos ajustes en las alturas de las filas).

Answer 3

El complemento jQuery DataTables es una forma excelente de obtener columnas y encabezados fijos similares a los de Excel.

Tenga en cuenta la sección de ejemplos del sitio y los "extras".
http://datatables.net/examples/
http://datatables.net/extras/

La sección "Extras" tiene herramientas para columnas fijas y encabezados fijos.

Columnas fijas
http://datatables.net/extras/fixedcolumns/
(Creo que el ejemplo en esta página es el más apropiado para su pregunta).

Encabezado fijo
http://datatables.net/extras/fixedheader/
(Incluye un ejemplo con un diseño de estilo de hoja de cálculo de página completa: http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html )

Answer 4

En esta respuesta también hay la mejor respuesta que encontré para su pregunta:

Tabla HTML con encabezados fijos?

y basado en CSS puro

Answer 5

Es posible que esté buscando this .

Sin embargo, tiene algunos problemas conocidos.

Answer 6

He creado algo que tiene encabezado fijo, pie de página fijo, columna izquierda fija y también columna derecha fija. Esto solo funciona bien en IE. Como la mayoría de los usuarios todavía usan IE, esto puede ser útil. Por favor, encuentre el código aquí en la Tabla Desplazable . Por favor déjenme sus sugerencias.

Mientras tanto, estoy trabajando para arreglar columnas en otro navegador. Te mantendré informado. :-)

Answer 7

La primera columna tiene una barra de desplazamiento en la celda justo debajo de los encabezados

<table>
    <thead>
        <th> Header 1</th>
        <th> Header 2</th>
        <th> Header 3</th>
    </thead>
    <tbody>
        <tr>
            <td>
                <div style="width: 50; height:30; overflow-y: scroll"> 
                    Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk 
                    fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf
                </div>
            </td>
            <td>
                Hello world
            </td>
            <td> Hello world2
        </tr>
    </tbody>
</table>

Answer 8

No del todo perfecto, pero me puso más cerca que algunas de las principales respuestas aquí.

Dos tablas diferentes, una con el encabezado, y la otra, envuelta con un div con el contenido

<table>
  <thead>
    <tr><th>Stuff</th><th>Second Stuff</th></tr>
  </thead>
</table>
<div style="height: 600px; overflow: auto;">
  <table>
    <tbody>
      //Table
    </tbody>
  </table>
</div>

Answer 9

Sé que puedes hacerlo para MSIE y este ejemplo limitado parece funcionar para Firefox (no estoy seguro de cuán extensible es la técnica).

Answer 10

Si lo que quieres es que los encabezados permanezcan en blanco mientras los datos en la tabla se desplazan verticalmente, debes implementar un <tbody> estilo con "overflow-y: auto" como este:

<table>
  <thead>
    <tr>
      <th>Header1</th>
       . . . 
    </tr>
   </thead>
   <tbody style="height: 300px; overflow-y: auto"> 
     <tr>
       . . .
     </tr>
     . . .
   </tbody>
 </table>

Si el contenido <tbody> crece más alto que la altura deseada, comenzará a desplazarse. Sin embargo, los encabezados permanecerán fijos en la parte superior independientemente de la posición de desplazamiento.

Answer 11

Veo esto, aunque es una vieja pregunta, es un buen lugar para conectar mi propio script:

http://code.google.com/p/js-scroll-table-header/

Simplemente funciona sin configuración y es realmente fácil de configurar.

Answer 12

YUI DataTable

No sé si YUI DT tiene esta característica, pero no me sorprendería si lo hiciera.

Answer 13

<script>
   $(document).ready(function () {
   $("#GridHeader table").html($(''#<%= GridView1.ClientID %>'').html());
   $("#GridHeader table tbody .rows").remove();
   $(''#<%= GridView1.ClientID %> tr:first th'').hide();
});
</script>

<div id="GridHeader">
    <table></table>
</div>

<div style="overflow: auto; height:400px;">
    <asp:GridView ID="GridView1" runat="server" />
</div>