[HTML]자제 행렬 고정표[CSS]

여기.에서 프로그램 시작 가능
HTML도 조금만 공을 들이면 엑셀처럼 매트릭스 고정표를 만들 수 있다.
매트릭스 고정표용 라이브러리도 있지만 이러면 직접 하는 게 좋아요.
그럼 제가 논리를 설명해 드릴게요.행수 7, 열수 7의 경우 설명한다.
먼저 HTML로 시작합니다.
4개의 DIV를 작성하여 각 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의 스크롤 활동에서 #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のスクロール位置を更新
});

요약:
매트릭스 고정표를 실현하려면 선택하십시오
4개의 DIV를 만들어 각각의 DIV의 하위 요소에서 TABLE를 만든다.
오른쪽 아래 DIV를 스크롤할 때 오른쪽 위, 왼쪽 아래 DIV를 연결합니다.오른쪽 위, 왼쪽 아래 탁자 위에서 가짜를 만들다.