fisso <thead> in <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> 

mi piacerebbe tabella qui sopra per essere di 50px in altezza in modo che i scroller sarebbe calci in quando il contenuto cresce, ma mi piacerebbe anche intestazioni di tabella (thead) da fissare sempre in primo piano , mentre altri contenuti possono essere scorrevoli. C'è una soluzione, preferibile usando jQuery?

Grazie in anticipo per il vostro aiuto.

Answer 1

Prova questo post: jQuery Scrollable, Sortable, Filterable table

Sembra che hanno avuto quello che vi serve (che è una, tavolo jQuery scorrevole freezable).

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> 

Aggiornamento:

Check this out:

Link

Another Link a t CSS Tricks

Answer 3

mi sono trovato bisogno di una funzionalità simile. Non ho trovato nulla di leggero e semplice, quindi ho creato io stesso il plugin: TH Float jQuery Plugin

Spero che qualcuno lo trovi utile.

Answer 4

Ecco il mio trucco. Devi anche cambiare qualcosa nel tuo html.

Il trucco consiste nell'inserire tramite js dopo il vero scrollante, un cavo secondario identico posizionato fisso. Anche le larghezze delle celle vengono regolate tramite js.

Regola il codice in base alle tue esigenze.

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

Utilizzando i CSS trasformare potrebbe essere più semplice:

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