テーブルのヘッダーと左カラムを固定表示「fixedTblHdrLftCol」
当ページのリンクには広告が含まれています。
スポンサーリンク
テーブルのヘッダーと左カラムを固定表示するプラグイン「fixedTblHdrLftCol」を紹介します。
jQueryプラグイン「fixedTblHdrLftCol」
このプラグイン使えば、テーブルを下へスクロールした場合にはヘッダーを固定し、右へスクロールした場合には左カラムを固定するというExcelの「ウィンドウ枠の固定」のような機能をWeb上に実装することができます。
スポンサーリンク
デモのテーブルをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="abixTreeListのデモでーす。">
<title>abixTreeList - jQuery Plugin Demo</title>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="jquery.fixedTblHdrLftCol.js"></script>
<script>
$(function() {
$('table').fixedTblHdrLftCol();
});
</script>
</head>
<body>
<table>
<thead>
<tr><th>バージョン</th><th>コードネーム</th><th>和訳</th><th>リリース</th></tr>
</thead>
<tbody>
<tr><td>10.0</td><td>Cheetah</td><td>チーター</td><td>2001年3月</td></tr>
<tr><td>10.1</td><td>Puma</td><td>ピューマ</td><td>2001年9月</td></tr>
<tr><td>10.2</td><td>Jaguar</td><td>ジャガー</td><td>2002年8月</td></tr>
<tr><td>10.3</td><td>Panther</td><td>ヒョウ</td><td>2003年10月</td></tr>
<tr><td>10.4</td><td>Tiger</td><td>トラ</td><td>2005年4月</td></tr>
<tr><td>10.5</td><td>Leopard</td><td>ヒョウ</td><td>2007年10月</td></tr>
<tr><td>10.6</td><td>Snow Leopard</td><td>ユキヒョウ</td><td>2009年8月</td></tr>
<tr><td>10.7</td><td>Lion</td><td>ライオン</td><td>2011年7月</td></tr>
<tr><td>10.8</td><td>Mountain Lion</td><td>マウンテン・ライオン</td><td>2012年7月</td></tr>
</tbody>
</table>
</body>
</html>
スポンサーリンク