【HTML】行列固定テーブルを自作しよう【CSS】
こちらからプログラムを動かすことができます
HTMLでも少し工夫をすれば、EXCELのように行列固定テーブルを作ることが可能です。
行列固定テーブル用のライブラリもありますが、これぐらいは自前で作れるようになっておいたほうがよいでしょう。
では、ロジックの説明をします。行数7,列数7の場合で説明します。
まず、HTMLから見ていきます。
DIVを4つ作成し、それぞれのDIVの子要素にTABLEを指定します。
<div id="fixedTableArea">
<div id="topLeftArea">
<table id="topLeftTable" class="fixedTable">
<tbody>
<tr>
<td>column0</td>
<td>column1</td>
</tr>
</tbody>
</table>
</div>
<div id="topRightArea">
<table id="topRightTable" class="fixedTable">
<tbody><tr><td>column2</td><td>column3</td><td>column4</td><td>column5</td><td>column6</td><td class="dummyColumn"></td></tr></tbody>
</table>
</div>
<div id="bottomLeftArea">
<table id="bottomLeftTable" class="fixedTable">
<tbody><tr><td>data0-0</td><td>data0-1</td></tr><tr><td>data1-0</td><td>data1-1</td></tr><tr><td>data2-0</td><td>data2-1</td></tr><tr><td>data3-0</td><td>data3-1</td></tr><tr><td>data4-0</td><td>data4-1</td></tr><tr><td>data5-0</td><td>data5-1</td></tr><tr><td>data6-0</td><td>data6-1</td></tr><tr><td class="dummyRow"></td><td class="dummyRow"></td></tr></tbody>
</table>
</div>
<div id="bottomRightArea">
<table id="bottomRightTable" class="fixedTable">
<tbody><tr><td>data0-2</td><td>data0-3</td><td>data0-4</td><td>data0-5</td><td>data0-6</td></tr><tr><td>data1-2</td><td>data1-3</td><td>data1-4</td><td>data1-5</td><td>data1-6</td></tr><tr><td>data2-2</td><td>data2-3</td><td>data2-4</td><td>data2-5</td><td>data2-6</td></tr><tr><td>data3-2</td><td>data3-3</td><td>data3-4</td><td>data3-5</td><td>data3-6</td></tr><tr><td>data4-2</td><td>data4-3</td><td>data4-4</td><td>data4-5</td><td>data4-6</td></tr><tr><td>data5-2</td><td>data5-3</td><td>data5-4</td><td>data5-5</td><td>data5-6</td></tr><tr><td>data6-2</td><td>data6-3</td><td>data6-4</td><td>data6-5</td><td>data6-6</td></tr></tbody>
</table>
</div>
</div>
次に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を連動させる。 右上、左下テーブルにダミーを作る。
Author And Source
この問題について(【HTML】行列固定テーブルを自作しよう【CSS】), 我々は、より多くの情報をここで見つけました https://qiita.com/PG0721/items/6815e259c49f8b4ac7f3著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .