【jQuery】テーブルの表頭を固定してスクロールさせる

色々と方法はあるようだが、微妙に調整が必要だったりタグ構造に依存してたりあるようで、ズレることもしばしば。

参考にしたのは、
jquery.tablefix.js – OTCHY.NET

jQuery プラグインで実現する。

普通にテーブルをデザインして

<table id="tablefix1">
    <thead>
    <tr>
        <th rowspan="2">ヘッダA</th>
        <th rowspan="2">ヘッダB</th>
        <th colspan="2">ヘッダC</th>
        <th rowspan="2">ヘッダD</th>
        <th rowspan="2">ヘッダE</th>
    </tr>
    <tr>
        <th>ヘッダ C-1</th>
        <th>ヘッダ C-2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>データ</td>
        <td>データ</td>

プラグインを呼び出すだけ

$('.table').tablefix({
	width: 600,
	height: 400,
	fixRows: 1
});