javascript - td の水平および垂直スクロール、th を修正する必要があります

Question

「th」の値は固定し、「td」の値はスクロールする必要があります。「th」の高さが 100px を超える場合は、「then」もそれぞれの「td」でスクロールする必要があります。「th」と「td」の数は動的です。助けてください。

<table cellspacing="0" cellpadding="0" class="selectionContainer"
    id="mySeatContainer">
    <tbody>
        <tr class="rowNode" id="mySeatRow0">
            <th></th>
            <td>
                <span class="colNonSeat" tag="1,1" id="mySeatCol1_1">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,2" id="mySeatCol1_2">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,3" id="mySeatCol1_3">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,4" id="mySeatCol1_4">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,5" id="mySeatCol1_5">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,6" id="mySeatCol1_6">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,7" id="mySeatCol1_7">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,8" id="mySeatCol1_8">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,9" id="mySeatCol1_9">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,10" id="mySeatCol1_10">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,11" id="mySeatCol1_11">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,12" id="mySeatCol1_12">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,13" id="mySeatCol1_13">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,14" id="mySeatCol1_14">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,15" id="mySeatCol1_15">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,16" id="mySeatCol1_16">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,17" id="mySeatCol1_17">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,18" id="mySeatCol1_18">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,19" id="mySeatCol1_19">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,20" id="mySeatCol1_20">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,21" id="mySeatCol1_21">&nbsp;
                </span>
            </td>
        </tr>
        <tr class="rowNode" id="mySeatRow1">
            <th class="rowLabel" tag="" id="RowB">B</th>
            <td>
                <span class="colAccessible colAvailable colPointer" tag="2,1"
                    id="mySeatCol2_1">&nbsp;
                </span>
            </td>
            <td>
                <span class="colCompanion colAvailable colPointer" tag="2,2"
                    id="mySeatCol2_2">&nbsp;
                </span>
            </td>
            <td>
                <span class="colAccessible colAvailable colPointer" tag="2,3"
                    id="mySeatCol2_3">&nbsp;
                </span>
            </td>
            <td>
                <span class="colCompanion colAvailable colPointer" tag="2,4"
                    id="mySeatCol2_4">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,5"
                    id="mySeatCol2_5">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="2,6" id="mySeatCol2_6">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,7"
                    id="mySeatCol2_7">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,8"
                    id="mySeatCol2_8">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,9"
                    id="mySeatCol2_9">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,10"
                    id="mySeatCol2_10">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,11"
                    id="mySeatCol2_11">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,12"
                    id="mySeatCol2_12">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,13"
                    id="mySeatCol2_13">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,14"
                    id="mySeatCol2_14">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,15"
                    id="mySeatCol2_15">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,16"
                    id="mySeatCol2_16">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,17"
                    id="mySeatCol2_17">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,18"
                    id="mySeatCol2_18">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,19"
                    id="mySeatCol2_19">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,20"
                    id="mySeatCol2_20">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,21"
                    id="mySeatCol2_21">&nbsp;
                </span>
            </td>
        </tr>
        <tr class="rowNode" id="mySeatRow2">
            <th class="rowLabel" tag="" id="RowC">C</th>
            <td>
                <span class="colNonSeat" tag="3,1" id="mySeatCol3_1">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="3,2"
                    id="mySeatCol3_2">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="3,3"
                    id="mySeatCol3_3">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="3,4"
                    id="mySeatCol3_4">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="3,5"
                    id="mySeatCol3_5">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="3,6" id="mySeatCol3_6">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="3,7"
                    id="mySeatCol3_7">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="3,8"
                    id="mySeatCol3_8">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="3,9"
                    id="mySeatCol3_9">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="3,10"
                    id="mySeatCol3_10">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="3,11"
                    id="mySeatCol3_11">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="3,12"
                    id="mySeatCol3_12">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="3,13"
                    id="mySeatCol3_13">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="3,14"
                    id="mySeatCol3_14">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="3,15"
                    id="mySeatCol3_15">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="3,16"
                    id="mySeatCol3_16">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="3,17"
                    id="mySeatCol3_17">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="3,18"
                    id="mySeatCol3_18">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="3,19"
                    id="mySeatCol3_19">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="3,20"
                    id="mySeatCol3_20">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="3,21" id="mySeatCol3_21">&nbsp;
                </span>
            </td>
        </tr>
        <tr class="rowNode" id="mySeatRow3">
            <th class="rowLabel" tag="" id="RowD">D</th>
            <td>
                <span class="colAisle" tag="4,1" id="mySeatCol4_1">&nbsp;
                </span>
            </td>
            <td>
                <span class="colAisle" tag="4,2" id="mySeatCol4_2">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="4,3"
                    id="mySeatCol4_3">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveCenter colAvailable colPointer" tag="4,4"
                    id="mySeatCol4_4">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="4,5"
                    id="mySeatCol4_5">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="4,6" id="mySeatCol4_6">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="4,7"
                    id="mySeatCol4_7">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="4,8"
                    id="mySeatCol4_8">&nbsp;
                </span>
            </td>
            <td>
                <span class="colRecliner colAvailable colPointer" tag="4,9"
                    id="mySeatCol4_9">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="4,10"
                    id="mySeatCol4_10">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="4,11"
                    id="mySeatCol4_11">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="4,12"
                    id="mySeatCol4_12">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveCenter colAvailable colPointer" tag="4,13"
                    id="mySeatCol4_13">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="4,14"
                    id="mySeatCol4_14">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="4,15"
                    id="mySeatCol4_15">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="4,16"
                    id="mySeatCol4_16">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="4,17"
                    id="mySeatCol4_17">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveCenter colAvailable colPointer" tag="4,18"
                    id="mySeatCol4_18">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="4,19"
                    id="mySeatCol4_19">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="4,20" id="mySeatCol4_20">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="4,21" id="mySeatCol4_21">&nbsp;
                </span>
            </td>
        </tr>
        <tr class="rowNode" id="mySeatRow4">
            <th class="rowLabel" tag="" id="RowE">E</th>
            <td>
                <span class="colNonSeat" tag="5,1" id="mySeatCol5_1">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="5,2" id="mySeatCol5_2">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="5,3"
                    id="mySeatCol5_3">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveCenter colAvailable colPointer" tag="5,4"
                    id="mySeatCol5_4">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="5,5"
                    id="mySeatCol5_5">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="5,6" id="mySeatCol5_6">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="5,7"
                    id="mySeatCol5_7">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveCenter colAvailable colPointer" tag="5,8"
                    id="mySeatCol5_8">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="5,9"
                    id="mySeatCol5_9">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="5,10" id="mySeatCol5_10">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="5,11" id="mySeatCol5_11">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="5,12" id="mySeatCol5_12">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="5,13" id="mySeatCol5_13">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="5,14" id="mySeatCol5_14">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="5,15" id="mySeatCol5_15">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="5,16" id="mySeatCol5_16">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="5,17"
                    id="mySeatCol5_17">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveCenter colAvailable colPointer" tag="5,18"
                    id="mySeatCol5_18">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="5,19"
                    id="mySeatCol5_19">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="5,20" id="mySeatCol5_20">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="5,21" id="mySeatCol5_21">&nbsp;
                </span>
            </td>
        </tr>
        <tr class="rowNode" id="mySeatRow5">
            <th class="rowLabel" tag="" id="RowF">F</th>
            <td>
                <span class="colAccessible colAvailable colPointer" tag="6,1"
                    id="mySeatCol6_1">&nbsp;
                </span>
            </td>
            <td>
                <span class="colCompanion colAvailable colPointer" tag="6,2"
                    id="mySeatCol6_2">&nbsp;
                </span>
            </td>
            <td>
                <span class="colAccessible colAvailable colPointer" tag="6,3"
                    id="mySeatCol6_3">&nbsp;
                </span>
            </td>
            <td>
                <span class="colCompanion colAvailable colPointer" tag="6,4"
                    id="mySeatCol6_4">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="6,5"
                    id="mySeatCol6_5">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="6,6" id="mySeatCol6_6">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="6,7"
                    id="mySeatCol6_7">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="6,8"
                    id="mySeatCol6_8">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="6,9"
                    id="mySeatCol6_9">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="6,10"
                    id="mySeatCol6_10">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="6,11"
                    id="mySeatCol6_11">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="6,12"
                    id="mySeatCol6_12">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="6,13"
                    id="mySeatCol6_13">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="6,14"
                    id="mySeatCol6_14">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="6,15"
                    id="mySeatCol6_15">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="6,16"
                    id="mySeatCol6_16">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="6,17"
                    id="mySeatCol6_17">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="6,18"
                    id="mySeatCol6_18">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="6,19"
                    id="mySeatCol6_19">&nbsp;
                </span>
            </td>
            <td>
                <span class="colAisle" tag="6,20" id="mySeatCol6_20">&nbsp;
                </span>
            </td>
            <td>
                <span class="colAisle" tag="6,21" id="mySeatCol6_21">&nbsp;
                </span>
            </td>
        </tr>
        <tr class="rowNode" id="mySeatRow6">
            <th class="rowLabel" tag="" id="RowG">G</th>
            <td>
                <span class="colNonSeat" tag="7,1" id="mySeatCol7_1">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="7,2"
                    id="mySeatCol7_2">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="7,3"
                    id="mySeatCol7_3">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="7,4"
                    id="mySeatCol7_4">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="7,5"
                    id="mySeatCol7_5">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="7,6" id="mySeatCol7_6">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="7,7"
                    id="mySeatCol7_7">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="7,8"
                    id="mySeatCol7_8">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="7,9"
                    id="mySeatCol7_9">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="7,10"
                    id="mySeatCol7_10">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="7,11"
                    id="mySeatCol7_11">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="7,12"
                    id="mySeatCol7_12">&nbsp;
                </span>
            </td>
            <td>
                <span class="colPillar colAvailable" tag="7,13" id="mySeatCol7_13">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="7,14"
                    id="mySeatCol7_14">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="7,15"
                    id="mySeatCol7_15">&nbsp;
                </span>
            </td>
            <td>
                <span class="colPillar colAvailable" tag="7,16" id="mySeatCol7_16">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="7,17"
                    id="mySeatCol7_17">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="7,18"
                    id="mySeatCol7_18">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="7,19"
                    id="mySeatCol7_19">&nbsp;
                </span>
            </td>
            <td>
                <span class="colAisle" tag="7,20" id="mySeatCol7_20">&nbsp;
                </span>
            </td>
            <td>
                <span class="colAisle" tag="7,21" id="mySeatCol7_21">&nbsp;
                </span>
            </td>
        </tr>
        <tr class="rowNode" id="mySeatRow7">
            <th class="rowLabel" tag="" id="RowH">H</th>
            <td>
                <span class="colAisle" tag="8,1" id="mySeatCol8_1">&nbsp;
                </span>
            </td>
            <td>
                <span class="colAisle" tag="8,2" id="mySeatCol8_2">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="8,3"
                    id="mySeatCol8_3">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveCenter colAvailable colPointer" tag="8,4"
                    id="mySeatCol8_4">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="8,5"
                    id="mySeatCol8_5">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="8,6" id="mySeatCol8_6">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="8,7"
                    id="mySeatCol8_7">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="8,8"
                    id="mySeatCol8_8">&nbsp;
                </span>
            </td>
            <td>
                <span class="colRecliner colAvailable colPointer" tag="8,9"
                    id="mySeatCol8_9">&nbsp;
                </span>
            </td>
            <td>
                <span class="colAisle" tag="8,10" id="mySeatCol8_10">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="8,11" id="mySeatCol8_11">&nbsp;
                </span>
            </td>
            <td>
                <span class="colAccessible colAvailable colPointer" tag="8,12"
                    id="mySeatCol8_12">&nbsp;
                </span>
            </td>
            <td>
                <span class="colCompanion colAvailable colPointer" tag="8,13"
                    id="mySeatCol8_13">&nbsp;
                </span>
            </td>
            <td>
                <span class="colAccessible colAvailable colPointer" tag="8,14"
                    id="mySeatCol8_14">&nbsp;
                </span>
            </td>
            <td>
                <span class="colCompanion colAvailable colPointer" tag="8,15"
                    id="mySeatCol8_15">&nbsp;
                </span>
            </td>
            <td>
                <span class="colTable colAvailable" tag="8,16" id="mySeatCol8_16">&nbsp;
                </span>
            </td>
            <td>
                <span class="colDBox colAvailable colPointer" tag="8,17"
                    id="mySeatCol8_17">&nbsp;
                </span>
            </td>
            <td>
                <span class="colDBox colAvailable colPointer" tag="8,18"
                    id="mySeatCol8_18">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="8,19"
                    id="mySeatCol8_19">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveCenter colAvailable colPointer" tag="8,20"
                    id="mySeatCol8_20">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="8,21"
                    id="mySeatCol8_21">&nbsp;
                </span>
            </td>
        </tr>
    </tbody>
</table>
<table cellspacing="0" cellpadding="0" class="selectionContainer"
    id="mySeatContainer">
    <tbody>
        <tr class="rowNode" id="mySeatRow0">
            <th></th>
            <td>
                <span class="colNonSeat" tag="1,1" id="mySeatCol1_1">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,2" id="mySeatCol1_2">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,3" id="mySeatCol1_3">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,4" id="mySeatCol1_4">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,5" id="mySeatCol1_5">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,6" id="mySeatCol1_6">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,7" id="mySeatCol1_7">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,8" id="mySeatCol1_8">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,9" id="mySeatCol1_9">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,10" id="mySeatCol1_10">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,11" id="mySeatCol1_11">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,12" id="mySeatCol1_12">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,13" id="mySeatCol1_13">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,14" id="mySeatCol1_14">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,15" id="mySeatCol1_15">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,16" id="mySeatCol1_16">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,17" id="mySeatCol1_17">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,18" id="mySeatCol1_18">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,19" id="mySeatCol1_19">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,20" id="mySeatCol1_20">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="1,21" id="mySeatCol1_21">&nbsp;
                </span>
            </td>
        </tr>
        <tr class="rowNode" id="mySeatRow1">
            <th class="rowLabel" tag="" id="RowB">B</th>
            <td>
                <span class="colAccessible colAvailable colPointer" tag="2,1"
                    id="mySeatCol2_1">&nbsp;
                </span>
            </td>
            <td>
                <span class="colCompanion colAvailable colPointer" tag="2,2"
                    id="mySeatCol2_2">&nbsp;
                </span>
            </td>
            <td>
                <span class="colAccessible colAvailable colPointer" tag="2,3"
                    id="mySeatCol2_3">&nbsp;
                </span>
            </td>
            <td>
                <span class="colCompanion colAvailable colPointer" tag="2,4"
                    id="mySeatCol2_4">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,5"
                    id="mySeatCol2_5">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="2,6" id="mySeatCol2_6">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNormal colAvailable colPointer" tag="2,7"
                    id="mySeatCol2_7">&nbsp;
                </span>
            </td>


        </tr>
        <tr class="rowNode" id="mySeatRow2">
            <th class="rowLabel" tag="" id="RowC">C</th>
            <td>
                <span class="colNonSeat" tag="3,1" id="mySeatCol3_1">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="3,2"
                    id="mySeatCol3_2">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="3,3"
                    id="mySeatCol3_3">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="3,4"
                    id="mySeatCol3_4">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveRight colAvailable colPointer" tag="3,5"
                    id="mySeatCol3_5">&nbsp;
                </span>
            </td>
            <td>
                <span class="colNonSeat" tag="3,6" id="mySeatCol3_6">&nbsp;
                </span>
            </td>
            <td>
                <span class="colLoveLeft colAvailable colPointer" tag="3,7"
                    id="mySeatCol3_7">&nbsp;
                </span>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

Jquery で scrollTop() と scrollLeft() を使用できます。

$(yourTDdiv).scroll(function () { verthandlescrollbars(th, tdDiv, thDiv); });
$(yourTDdiv).scroll(function () { horihandlescrollbars(th, tdDiv, thDiv); });

function verthandlescrollbars(th ,thDiv, tdDiv){  
     if($(th).height() > 100){

        $(thDiv).scrollLeft($(tdDiv).scrollLeft());

      }
 }

function horihandlescrollbars(th, tdDiv, thDiv){
   //the same as verthandlescrollbars function!
   //$(thDiv).scrollTop 
}

これは疑似コードである必要があります。

Answer 2

これは次のように書くことができますcss:

.selectionContainer td
{
    width:100px;overflow:auto;
}
.selectionContainer th
{
    width:100px;overflow:auto;height:100px;
}