CSSを使用して固定ヘッダーでスクロール可能なテーブルを作成する方法

Question

テーブルのヘッダーを固定する必要があります。スクロール可能なdivの内部に存在します。私のコードはhttp://jsfiddle.net/w7Mm8/114/にお願いします。

おかげ

マイコード：私はそれを行うには生意気な方法を考えることができ

<div style="position: absolute; height: 200px; overflow: auto; "> 
 
    <div style="height: 250px;"> 
 
     <table border="1"> 
 
      <th>head1</th> 
 
      <th>head2</th> 
 
      <th>head3</th> 
 
      <th>head4</th> 
 
      <tr> 
 
       <td>row 1, cell 1</td> 
 
       <td>row 1, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
      </tr> 
 
      <tr> 
 
       <td>row 2, cell 1</td> 
 
       <td>row 2, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
       <td>row 1, cell 2</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div>

Answer 1

は、私は、これが最良の選択肢になるとは思わないけどそれが動作します。

ヘッダを別のテーブルとして作成し、もう一方をdivに配置して最大サイズを設定してから、overflowを使用してスクロールを開始させます。

HTML：

<table border="1"> 
    <tr> 
    <th>head1</th> 
    <th>head2</th> 
    <th>head3</th> 
    <th>head4</th> 
    </tr> 
</table> 
<div class="scroll"> 
    <table> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>More Text</td><td>More Text</td><td>More Text</td><td>More Text</td></tr> 
     <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr> 
     <tr><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td></tr> 
    </table> 
</div> 

CSS：

table { 
    width: 500px; 
} 

.scroll { 
    max-height: 60px; 
    overflow: auto; 
} 

DEMO HERE

Answer 2

あなたが何をしたいのかは、テーブルのヘッダからテーブルの内容を別のものです。 <th>要素だけをスクロールします。 <tbody>と<thead>要素を使用して、HTMLで簡単にこの区切りを定義することができます。
これで、テーブルのヘッダーと本文がまだ接続されていても、同じ幅（同じスクロールプロパティ）を持ちます。さて、テーブルとして「働かない」ようにするには、display: blockを設定することができます。この方法で<thead>と<tbody>が分離されます。

table tbody, table thead 
{ 
    display: block; 
} 

今、あなたは、テーブルの本体にスクロールを設定することができます。<thead>はもう体と同じ幅を共有していないので、あなたは静的に設定する必要があり、

table tbody 
{ 
    overflow: auto; 
    height: 100px; 
} 

そして最後にテーブルのヘッダに、幅：

th 
{ 
    width: 72px; 
} 

あなたは<td>の静的幅も設定する必要があります。これは、アライメントされていない列の問題を解決します。あなたはまた、いくつかのHTML要素が欠落している

td 
{ 
    width: 72px; 
} 

---

注意。すべての行はヘッダ行が含ま <tr>要素にする必要があります：

<tr> 
    <th>head1</th> 
    <th>head2</th> 
    <th>head3</th> 
    <th>head4</th> 
</tr> 

私は、これはあなたが何を意味するのかであると思います。

jsFiddle