fijo <thead> en <table>

Question

<table border="1" style="height:50px; overflow:auto;"> 
    <thead> 
    <tr> 
     <th>Col 1 
     </th> 
     <th>Col 2 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Cell 3 
     </td> 
     <td>Cell 4 
     </td> 
    </tr> 
    <tr> 
     <td>Cell 5 
     </td> 
     <td>Cell 6 
     </td> 
    </tr> 
    </tbody> 
</table> 

me gustaría la tabla anterior para ser de 50px de altura por lo que los scrollers que entran en juego cuando el contenido crece, pero también me gustaría encabezados de la tabla (THEAD) que debe fijarse siempre en la parte superior , mientras que otro contenido puede ser desplazable. ¿Hay alguna solución, preferiblemente usando jQuery?

Gracias de antemano por su ayuda.

Answer 1

probar este mensaje: jQuery Scrollable, Sortable, Filterable table

Parece que ellos tienen lo que necesita (que es una tabla jQuery congelable, enrollables).

Answer 2

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

<div style="overflow: auto;height: 50px; 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> 

actualización:

mira esto:

Link

Another Link a t CSS Tricks

Answer 3

mismo encontrado en la necesidad de una funcionalidad similar. No pude encontrar nada liviano y simple, así que creé el plugin yo mismo: TH Float jQuery Plugin

Espero que alguien lo encuentre útil.

Answer 4

Aquí está mi truco. Tienes que cambiar algo en tu html también.

El truco consiste en insertar a través de js después del cursor de desplazamiento real, un icono secundario e idéntico colocado fijo. El ancho de las celdas se ajusta a través de js también.

Ajuste el código según sus necesidades.

CSS

thead.fixed { 
    position: fixed; 
} 

HTML

<div style="overflow: auto;"> 
    <table id="my_table"> 
    <thead> 
     <tr> 
     <th>Head 1</th> 
     <th>Head 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>Body 1</td> 
     <td>Body 2</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

jQuery

$(function() { 
    fixListThead(); 
}); 
$(window).resize(function() { 
    fixListThead(); 
}); 
var fixListThead = function() { 
    $('#my_table thead.fixed').remove(); // Removes (if present) fixed thead when resizing 
    var widths = []; 
    $('#my_table thead th').each(function(i, element) { 
    widths[i] = $(element).width(); 
    }); 
    $('<thead class="fixed">' + $('#my_table thead').html() + '</thead>').insertAfter($('#my_table thead')); 
    $('#my_table thead.fixed th').each(function(i, element) { 
    $(element).css('width', widths[i] + 'px'); 
    }); 
} 

Answer 5

El uso de CSS transformada puede ser más simple:

-webkit-transform','translateY(0px)'