cssのみ - 固定ヘッダーでテーブルオーバーフロー

Question

コンテンツがコンテナより大きい場合、x方向とy方向にスクロール可能なテーブルを作成しようとしています。私はまた、ヘッダーが常に上に表示されるようにします。私は最初の部分が働いている、とヘッダーは、常に上部に表示されますが、ヘッダーの列のサイズがテーブルテーブルのサイズと一致しません。

私はこのバイオリンを作成しました：

http://jsfiddle.net/xxQQS/1/

私が唯一の解決策CSS後にしています。

EDIT：これはCSSでしかできないと思う人がかなりいるようです。これは事実かもしれませんが、「いいえこれはできません」と言うだけで投稿してください。 CSSなしでこれができない理由を説明できる場合は、私はあなたの答えを受け入れるでしょう。

Answer 1

テーブルのクローンを作成してください。最初のテーブルでは、visibility: hiddenを使用してヘッダーを除くすべての行を非表示にします。 visibility: hiddenを使用して、他のテーブルのヘッダーを非表示にします。次のようにオーバーフロープロパティを設定してdiv内にテーブルを配置します。

<div style="overflow-x: hidden; width: 400px;"> 
    <div style="overflow-y: hidden; height: 20px;"> 
     <table id="head-only"> 
     </table> 
    </div> 
    <div style="overflow-y: scroll; height: 100px;"> 
     <table id="body-only"> 
     </table> 
    </div> 
</div> 

Answer 2

これはJSを使用する必要があります。これをチェックしてくださいhttp://www.tablefixedheader.com/