列幅を変更可能なスティッキーヘッダー

Question

私は平らなテーブルを持っています。私のヘッダーは粘着性がありません。私は複数の方法を試みたが、うまくいかなかった。私のリストは非常に大きいので、ヘッダーではなく行のためのスクロールバーしか持たないことを計画しています。私の列はサイズ変更可能です。

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


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

Answer 1

スティッキーはここのものは粘着性のオブジェクトと親の両方をブロックする必要があること可能性があり

（しゃれのために残念）少しトリッキーなことができます。しかし、これはサイズ変更可能な列の希望とは組み合わされません。

私は両方の長所を組み合わせるために少しのjQueryを使用し

：

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

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

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

このwayyourのTHEADがトップを忘れてはいけない（

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

（あなたが右のCSSに入れた後）固執します：0PXを！）