lock freeze table left and top 鎖住table的上面和左邊表頭

base on https://stackoverflow.com/a/22340593/2564920

by Alan Tsai

HTML

<div class="row-headers2" id="row-headers2">
    <table>
        <tr>
            <th>test</th>
        </tr>
    </table>
</div>

<div class="column-headers" id="clscroll-column-headers">
    <table>
        <tr>
            <th>Bus</th>
            <th>Plane</th>
            <th>Boat</th>
            <th>Bicycle</th>
        </tr>
    </table>
</div>
<div class="row-headers" id="clscroll-row-headers">
    <table>
        <tr>
            <th>Red</th>
        </tr>
        <tr>
            <th>Green</th>
        </tr>
        <tr>
            <th>Blue</th>
        </tr>
        <tr>
            <th>Orange</th>
        </tr>
        <tr>
            <th>Purple</th>
        </tr>
        <tr>
            <th>Yellow</th>
        </tr>
        <tr>
            <th>Pink</th>
        </tr>
        <tr>
            <th>Brown</th>
        </tr>
    </table>
</div>
<div class="table-content" id="clscroll-content">
    <table>
        <tr>
            <td>Red Bus</td>
            <td>Red Plane</td>
            <td>Red Boat</td>
            <td>Red Bicycle</td>
        </tr>
        <tr>
            <td>Green Bus</td>
            <td>Green Plane</td>
            <td>Green Boat</td>
            <td>Green Bicycle</td>
        </tr>
        <tr>
            <td>Blue Bus</td>
            <td>Blue Plane</td>
            <td>Blue Boat</td>
            <td>Blue Bicycle</td>
        </tr>
        <tr>
            <td>Orange Bus</td>
            <td>Orange Plane</td>
            <td>Orange Boat</td>
            <td>Orange Bicycle</td>
        </tr>
        <tr>
            <td>Purple Bus</td>
            <td>Purple Plane</td>
            <td>Purple Boat</td>
            <td>Purple Bicycle</td>
        </tr>
        <tr>
            <td>Yellow Bus</td>
            <td>Yellow Plane</td>
            <td>Yellow Boat</td>
            <td>Yellow Bicycle</td>
        </tr>
        <tr>
            <td>Pink Bus</td>
            <td>Pink Plane</td>
            <td>Pink Boat</td>
           ...

CSS

table {
    table-layout: fixed;
    width: 200px;
}

td, th { 
    border: 1px solid black;
    overflow: hidden;
    width: 200px;
}

.column-headers {
    width: 381px;
    overflow: hidden;
}

.row-headers {
    height: 81px;
    overflow: hidden;
    position: absolute;
}

.row-headers2 {
    height: 81px;
    overflow: hidden;
    position: absolute;
}

.column-headers, .table-content {
    margin-left:207px;
}

.table-content {
    width: 400px;
    height: 100px;
    overflow: scroll;
}

JavaScript

$("#clscroll-content").scroll(function() {
    $("#clscroll-row-headers").scrollTop($("#clscroll-content").scrollTop());
    $("#clscroll-column-headers").scrollLeft($("#clscroll-content").scrollLeft());
});

$("#clscroll-column-headers").scroll(function() {
    $("#clscroll-content").scrollLeft($("#clscroll-column-headers").scrollLeft());
});

$("#clscroll-row-headers").scroll(function() {
    $("#clscroll-content").scrollTop($("#clscroll-row-headers").scrollTop());
});