0

これは私のコードです:

テーブルの本文にスクロール バーを追加する必要があります。ヘッダーは一定のままにする必要があります。スクロール バーを追加すると、ボディ セルが正しく固定されません。

テーブルの本文にスクロール バーを追加する必要があります。ヘッダーは一定のままにする必要があります。スクロール バーを追加すると、ボディ セルが正しく固定されません。

<table width="600" border="1" style="border-collapse:collapse; border: 1px solid #AEAEAE;" cellpadding="0" cellspacing="0">
<tr>
    <th rowspan="2">
        Title
    </th>
    <th rowspan="2">
        Title
    </th>
    <th colspan="4">
        Title
    </th>
    <th colspan="2">
        Title
    </th>


</tr>
<tr>
    <th>
        Title
    </th>
    <th>
       Title
    </th>
    <th>
        Title
    </th>
    <th>
        Title
    </th>
    <th>
        Title
    </th>
    <th>
        Title
    </th>

</tr>

        <td height="400">
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
        <td>
            Body
        </td>
    </tr>

4

2 に答える 2

3

テーブルの tbody 要素に高さとスクロール オーバーフローを与えるだけです。このような：

.tableClass tbody
{
     height: 300px; /* Random number I chose */
     overflow: scroll /* you can be more specific and use overflow-y */
}

編集：私はあなたのコードを見ましたが、あなたは < tbody > と < thead > を使用していません。それらについて読んでください。一般的な考え方は、テーブルのコンテンツを 1 つの要素でラップし、テーブルの見出しを 1 つの要素でラップすることです。

これが実際の例です: http://www.imaputz.com/cssStuff/bigFourVersion.html

于 2013-08-15T05:40:33.227 に答える
1

私が見つけた他のソリューションはどれも私の要件をすべて満たしていなかったので、これを行うために非常に軽量な jQuery プラグインを作成しました。固定ヘッダー、フッター、列スパン (colspan)、サイズ変更、およびスクロールが開始される前に表示するオプションの行数をサポートします。

jQuery.scrollTableBody (GitHub)

<thead>適切な、<tbody>、および (オプション)を含むテーブルがある限り、<tfoot>必要なことは次のとおりです。

$('table').scrollTableBody();
于 2013-09-24T05:30:35.790 に答える