行列固定テーブル

column0 column1

行数:   列数:   ダミー:    

行列を適当に入力して実行してみましょう。
スクロールバーを動かしてみると、行列が固定されたテーブルであることが分かります。

HTMLでも少し工夫をすれば、EXCELのように行列固定テーブルを作ることが可能です。
行列固定テーブル用のライブラリもありますが、これぐらいは自前で作れるようになっておいたほうがよいでしょう。

では、ロジックの説明をします。行数7,列数7の場合で説明します。
まず、HTMLから見ていきます。
DIVを4つ作成し、それぞれのDIVの子要素にTABLEを指定します。
右上のテーブル(topLeftTable)だけtr,tdがありますが、これは行数列数に依存しないためです。

	

		

			
				

					column0
					column1

次にCSSを見ていきます。
注目すべきは、#topRightAreaと#bottomLeftAreaのoverflowがhiddenになっている箇所と、
#bottomRightAreaのoverflowがscrollになっている箇所です。
#bottomRightAreaのscrollイベントで、#topRightAreaと#bottomLeftAreaのスクロール位置を変更すれば、 あたかも行列固定のテーブルに見えます。
しかし、それだけでは不十分です。
ダミーのtdが必要になります。
ダミーを"無し"にしてテーブルを作成して、スクロールバーを動かしてみましょう。 そうすれば、ダミーのtdの必要性がわかると思います。
#fixedTableArea {
	width: 590px;
	height: 200px;
	background-color: #DDFFFF;
}
#topLeftArea {
	float: left;
}
#topRightArea {
	width: 400px;
	float: left;
	overflow: hidden;
}
#bottomLeftArea {
	float: left;
	height: 170px;
	overflow: hidden;
}
#bottomRightArea {
	width: 400px;
	height: 170px;	
	overflow: scroll;
}

.fixedTable {
	border-collapse: collapse;
}
.fixedTable td {
	border: 1px solid #888;
	min-width: 90px;
	max-width: 90px;
	overflow: hidden;
	white-space: nowrap;
	height: 30px;
}
.fixedTable td.dummyColumn {
	width: 17px;
	border: 0px;
}
.fixedTable td.dummyRow {
	height: 18px;
	border: 0px;
}
最後にJavaScriptの部分を見ていきます。
既に説明したとおり、スクロールを連動させる必要があります。
$('#bottomRightArea').scroll(function(e) {
	$('#bottomLeftArea').scrollTop($(this).scrollTop()); // 左下のDIVのスクロール位置を更新
	$('#topRightArea').scrollLeft($(this).scrollLeft()); // 右下のDIVのスクロール位置を更新
});

まとめ:
行列固定テーブルを実現するには、
DIVを4つ作り、それぞれのDIVの子要素にTABLEを作る。
右下のDIVのスクロールに右上、左下のDIVを連動させる。 右上、左下テーブルにダミーを作る。

説明は以上です。
inserted by FC2 system