73

テーブルのヘッダーを固定したいです。テーブルはスクロール可能な 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>

4

2 に答える 2

62

あなたがしたいことは、テーブルの内容をテーブルのヘッダーから分離することです。<th>要素だけをスクロールしたい。<tbody>HTML では、要素と要素を使用して、この分離を簡単に定義できます<thead>。
これで、テーブルのヘッダーとボディは互いに接続されたままになり、同じ幅 (および同じスクロール プロパティ) になります。それらをテーブルとして「機能」させないようにするには、display: block. このよう<thead>に と<tbody>が分離されます。

table tbody, table thead
{
    display: block;
}

これで、スクロールをテーブルの本体に設定できます。

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

最後に、<thead>はボディと同じ幅を共有しなくなったため、テーブルのヘッダーに静的な幅を設定する必要があります。

th
{
    width: 72px;
}

の静的な幅も設定する必要があります<td>。これにより、整列されていない列の問題が解決されます。

td
{
    width: 72px;
}

また、いくつかの HTML 要素が欠落していることに注意してください。すべての行<tr>は、ヘッダー行を含む要素にある必要があります。

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

これがあなたの意図したものであることを願っています。

jsフィドル

補遺

列の幅をより細かく制御し、幅を相互に変化させ、ヘッダーと本文の列を整列させたい場合は、次の例を使用できます。

    table th:nth-child(1), td:nth-child(1) { min-width: 50px;  max-width: 50px; }
    table th:nth-child(2), td:nth-child(2) { min-width: 100px; max-width: 100px; }
    table th:nth-child(3), td:nth-child(3) { min-width: 150px; max-width: 150px; }
    table th:nth-child(4), td:nth-child(4) { min-width: 200px; max-width: 200px; }
于 2013-10-24T07:35:24.480 に答える