Web技術と表計算ソフトの便利な機能を組み合わせた、非常に便利な方法をご紹介します。
皆さんがお馴染みのExcelの「ウィンドウ枠の固定」と同様の機能をWebページ上で実現するためのテクニックです。具体的には、jquery.fixedTblHdrLftCol.jsというJavaScriptライブラリを使用して、Web上の表（table）の先頭行や列を固定する方法を詳しく解説します。これは、特に情報が多く、スクロールが必要な表で非常に役立ちます。
はじめに：「ウィンドウ枠の固定」機能の基本
Excelでよく使われる「ウィンドウ枠の固定」機能は、大量のデータを扱う際に見出し行や列を常に表示させ、その他のデータがスクロールしても追跡しやすくするために使用されます。
Webページで同様の機能を持たせることで、ユーザーは常に重要な情報（列や行のタイトル）を見失うことなく、内容を確認することができます。
HTMLページでも表（table）が縦長or横長になると先頭行が見えなくなるので、そんな時に使えます。
CSSの設計
そして、この表にスタイリッシュで実用的なデザインを適用するためのCSSは次の通りです。
表（table）と「ウィンドウ枠の固定」後のエリア（div.fTHLC-xxxxx）のCSS記述です。
<style>
body {
margin: 0;
padding: 0;
font-size: 18px;
text-align: center;
}
h1{
text-align: center;
font-size: 20px;
line-height: 2em;
padding: 30px 0 20px 0;
}
thead th {
height: 30px;
width: 100px;
padding: 0 5px;
line-height: 30px;
border-right: dotted 1px #000000;
}
thead th:first-child {
width: 80px;
}
tbody td {
word-break: break-all;
padding: 5px;
border: 0;
width: 100px;
vertical-align: top;
border-bottom: dotted 1px #000000;
border-right: dotted 1px #000000;
}
tbody td:first-child {
width: 80px;
}
div.fTHLC-outer-wrapper {
border: 1px solid #000000;
margin: 50px auto;
}
div.fTHLC-inner-wrapper {
border: 1px dotted #000000;
}
div.fTHLC-outer-corner {
background-color: #ffffff;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
</style>
表のHTML記述
表を作成する際のHTMLは次のようになります。これは、行と列が豊富な大きなデータセットを想定した構造です。
多数「行」と「列」がある表（table）を用意します。
<h1>表（table）をエクセルの「ウィンドウ枠の固定（先頭行の固定、先頭列の固定）」の様に表示します。<br>以下の表を左右にスクロールしてみてください。</h1>
<table id="demo1">
<thead>
<tr>
<th>表</th><th>1列</th><th>2列</th><th>3列</th><th>4列</th><th>5列</th><th>6列</th><th>7列</th><th>8列</th><th>9列</th>
</tr>
</thead>
<tbody>
<tr>
<td>1行</td><td>1の1</td><td>1の2</td><td>1の3</td><td>1の4</td><td>1の5</td><td>1の6</td><td>1の7</td><td>1の8</td><td>1の9</td>
</tr>
<tr>
<td>2行</td><td>2の1</td><td>2の2</td><td>2の3</td><td>2の4</td><td>2の5</td><td>2の6</td><td>2の7</td><td>2の8</td><td>2の9</td>
</tr>
<tr>
<td>3行</td><td>3の1</td><td>3の2</td><td>3の3</td><td>3の4</td><td>3の5</td><td>3の6</td><td>3の7</td><td>3の8</td><td>3の9</td>
</tr>
<tr>
<td>4行</td><td>4の1</td><td>4の2</td><td>4の3</td><td>4の4</td><td>4の5</td><td>4の6</td><td>4の7</td><td>4の8</td><td>4の9</td>
</tr>
<tr>
<td>5行</td><td>5の1</td><td>5の2</td><td>5の3</td><td>5の4</td><td>5の5</td><td>5の6</td><td>5の7</td><td>5の8</td><td>5の9</td>
</tr>
<tr>
<td>6行</td><td>6の1</td><td>6の2</td><td>6の3</td><td>6の4</td><td>6の5</td><td>6の6</td><td>6の7</td><td>6の8</td><td>6の9</td>
</tr>
<tr>
<td>7行</td><td>7の1</td><td>7の2</td><td>7の3</td><td>7の4</td><td>7の5</td><td>7の6</td><td>7の7</td><td>7の8</td><td>7の9</td>
</tr>
<tr>
<td>8行</td><td>8の1</td><td>8の2</td><td>8の3</td><td>8の4</td><td>8の5</td><td>8の6</td><td>8の7</td><td>8の8</td><td>8の9</td>
</tr>
<tr>
<td>9行</td><td>9の1</td><td>9の2</td><td>9の3</td><td>9の4</td><td>9の5</td><td>9の6</td><td>9の7</td><td>9の8</td><td>9の9</td>
</tr>
<tr>
<td>10行</td><td>10の1</td><td>10の2</td><td>10の3</td><td>10の4</td><td>10の5</td><td>10の6</td><td>10の7</td><td>10の8</td><td>10の9</td>
</tr>
<tr>
<td>11行</td><td>11の1</td><td>11の2</td><td>11の3</td><td>11の4</td><td>11の5</td><td>11の6</td><td>11の7</td><td>11の8</td><td>11の9</td>
</tr>
<tr>
<td>12行</td><td>12の1</td><td>12の2</td><td>12の3</td><td>12の4</td><td>12の5</td><td>12の6</td><td>12の7</td><td>12の8</td><td>12の9</td>
</tr>
<tr>
<td>13行</td><td>13の1</td><td>13の2</td><td>13の3</td><td>13の4</td><td>13の5</td><td>13の6</td><td>13の7</td><td>13の8</td><td>13の9</td>
</tr>
<tr>
<td>14行</td><td>14の1</td><td>14の2</td><td>14の3</td><td>14の4</td><td>14の5</td><td>14の6</td><td>14の7</td><td>14の8</td><td>14の9</td>
</tr>
<tr>
<td>15行</td><td>15の1</td><td>15の2</td><td>15の3</td><td>15の4</td><td>15の5</td><td>15の6</td><td>15の7</td><td>15の8</td><td>15の9</td>
</tr>
<tr>
<td>16行</td><td>16の1</td><td>16の2</td><td>16の3</td><td>16の4</td><td>16の5</td><td>16の6</td><td>16の7</td><td>16の8</td><td>16の9</td>
</tr>
<tr>
<td>17行</td><td>17の1</td><td>17の2</td><td>17の3</td><td>17の4</td><td>17の5</td><td>17の6</td><td>17の7</td><td>17の8</td><td>17の9</td>
</tr>
<tr>
<td>18行</td><td>18の1</td><td>18の2</td><td>18の3</td><td>18の4</td><td>18の5</td><td>18の6</td><td>18の7</td><td>18の8</td><td>18の9</td>
</tr>
</tbody>
</table>
jquery.fixedTblHdrLftCol.jsの導入と設定
まずは、jquery.fixedTblHdrLftCol.jsライブラリを使用するために、jquery-2.1.4.min.js、jquery.fixedTblHdrLftCol.jsファイルを読み込みます。
次に、特定のテーブルに対して固定機能を適用するJavaScriptを記述します。
$(‘表エリア’).fixedTblHdrLftCol({オプション})を記述します。オプションには表の縦・横サイズや固定箇所（列 or 行）の指定が出来ます。
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.fixedTblHdrLftCol.js"></script>
<script>
$(function() {
$('#demo1').fixedTblHdrLftCol({
scroll: {
height: '200px',
width: '330px'
}
});
});
</script>
このコードは、IDが demo1 のテーブルに対して、高さ200px、幅330pxのスクロール可能な領域を設定し、その中で表の先頭行と列が固定されるようにします。
表（table）をエクセルの「ウィンドウ枠の固定（先頭行の固定、先頭列の固定）」の様に表示するデモページ
以下のデモページへのリンクでは、実際にこのテクニックを使用した例を確認することができ、ソースコードもGitHubで公開されています。
表（table）をエクセルの「ウィンドウ枠の固定（先頭行の固定、先頭列の固定）」の様に表示するデモページ
ソース元：fixedTblHdrLftCol
まとめ
Webページ上でExcelの「ウィンドウ枠の固定」機能を模倣することは、ユーザーにとって非常に便利な機能を提供します。jquery.fixedTblHdrLftCol.jsを活用することで、複雑で大規模なデータセットを扱う表も、使いやすく、効果的に表示することが可能になります。この記事が、あなたのWeb開発の参考になれば幸いです。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
