En-tête collante avec colonnes largeur redimensionnable

Question

Je vais avoir une table plaine. Mon en-tête n'est pas collant. J'ai essayé plusieurs façons, mais cela n'a pas fonctionné. Ma liste est si grande que je prévois d'avoir une barre de défilement uniquement pour les lignes mais pas pour l'en-tête. Mes colonnes sont redimensionnables.

thead { 
    display: table-header-group; 
    vertical-align: middle; 
    border-color: inherit; 
} 


tbody { 
    display: table-row-group; 
    vertical-align: middle; 
    border-color: inherit; 
} 

Answer 1

Post-it peut être un peu difficile (désolé pour le jeu de mots)

La chose ici pourrait être que les deux l'objet collant et le parent doit être un bloc. Ceci cependant ne se combine pas avec votre désir des colonnes d'être redimensionnable.

J'utilise un peu jquery de combiner le meilleur des deux:

$('table, td, th, thead').width(function() {  
    return $(this).width(); 
}); 

$('td, th').height(function() { 
    return $(this).height(); 
}); 

$('table, thead').css('display','block') 

Ce thead de wayyour collera (après que vous mettez dans le droit css)

position: -webkit-sticky; 
position: -moz-sticky; 
position: -ms-sticky; 
position: -o-sticky; 
position: sticky; 
top: 0px; 

(Ne pas oublier le top: 0px !)