【HTML】行列固定テーブルを自作しよう【CSS】 #JavaScript

こちらからプログラムを動かすことができます

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を連動させる。右上、左下テーブルにダミーを作る。