学習メモ：html table セルの結合

html table merge dynamic

tableセルの結合（学習メモ）

IE, Edge, Chrome, FireFox で動確。（スマフォ系は未確認）

A1 B1 C1
A2 B2 C2
A3 B3 C3


html
<table id="table1" border="">
    <tr>
        <td colspan="2">A1</td>
        <td class="dep">B1</td>
        <td            >C1</td>
    </tr>
    <tr>
        <td rowspan="2">A2</td>
        <td            >B2</td>
        <td            >C2</td>
    </tr>
    <tr>
        <td class="dep">A3</td>
        <td            >B3</td>
        <td            >C3</td>
    </tr>
</table>
css
.dep {display: none;}

動的変更も可能。

javascript
function merge() {
    var tbl = document.getElementById("table1");
    tbl.rows[0].cells[2].rowSpan = "2";
    tbl.rows[1].cells[2].className = "dep";
    tbl.rows[2].cells[1].colSpan = "2";
    tbl.rows[2].cells[2].className = "dep";
}
function unmerge() {
    var tbl = document.getElementById("table1");
    tbl.rows[0].cells[2].rowSpan = "1";
    tbl.rows[1].cells[2].className = "";
    tbl.rows[2].cells[1].colSpan = "1";
    tbl.rows[2].cells[2].className = "";
}

行列インデックスが固定で良い。colgroup, col でも問題ない。