テーブルのヘッダを固定させる方法を探していたのですが、「thead」と「tbody」を分けた方法や、テーブルの幅が固定された方法しか見つけられなかったので、jQueryプラグインを試しに作ってみました。

jquery.smTheadfixed.js

対応するテーブルは、theadタグとtbodyタグを使った単純なテーブルで、rowspanやcolspanを使わないテーブルを想定しています。

テーブルの横幅は、固定と可変どちらでも対応するようにしています。

• jquery.smTheadfixed.js
• jquery.smTheadfixed.min.js

Options

記述例

tableタグにクラス名を指定、theadタグとtbodyタグを使用する。

<script type="text/javascript">
//<![CDATA[
    $(function(){
        $('.jsTheadfixed').smTheadfixed();
    });
//]]>
</script>

<table class="jsTheadfixed">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>AAA</td>
            <td>2014-01-01</td>
        </tr>
        <tr>
            <td>2</td>
            <td>BBB</td>
            <td>2014-02-01</td>
        </tr>
        <tr>
            <td>3</td>
            <td>CCC</td>
            <td>2014-03-01</td>
        </tr>
    </tbody>
</table>