本文首發我的簡書

  鑑於之前有幾個專案都用到了第一行第一列固定不動的表格，所以整理了一下製作這種表格的方法。
  基本原理是把表格分為四個部分，左上角是固定不動的，第一行和第一列是半固定的，只能左右移動或者上下移動，而右下角部分則是可以左右上下滑動，第一行和第一列根據右下角部分的移動來動態設定scrollLeft和scrollTop。示意圖如下：

廢話不多說，上程式碼
html部分

    <div class="container">
        <div id="left-div">
            <div
 
 id="left-div1">
                <table>
                    <tr>
                        <th>編號</th>
                    </tr>
                </table>
            </div>
            <div id="left-div2">
                <table id="left-table2"></table
 
>
            </div>
        </div>
        <div id="right-div">
            <div id="right-div1">
                <table id="right-table1">
                    <tr>
                        <th>裝置名稱</th>
                        <th>裝置型別</th>
 

                        <th>故障型別</th>
                        <th>故障狀態</th>
                    </tr>
                </table>
            </div>
            <div id="right-div2">
                <table id="right-table2"></table>
            </div>
        </div>
    </div>

css部分

        *{
            margin:0;
            padding: 0;
        }
        table{
            width:100%;
            text-align:center;
            border-collapse:collapse;
            border-spacing:0;
        }
        table td{
            word-break: break-all; 
            word-wrap:break-word; 
        }
        .container{
            width: 600px;
            height: 500px;
            padding: 0;
            box-sizing: border-box;
        }
        #left-div{
            width:80px;
            float: left;
        }
        #left-div1{
            width: 100%;
        }
        #left-div2{
            width: 100%;
            height: 250px;
            overflow: hidden;
        }
        #left-table2{
            margin-bottom: 4px;
        }
        #right-div{
            float: left;
            width: 240px;
        }
        #right-div1{
            width: 100%;
            overflow: hidden;
        }
        #right-div2{
            width: 100%;
            height: 250px;
            overflow: auto;
        }
        #right-table1{
            width: 320px;
        }
        #right-table2{
            width: 320px;
            overflow: auto;
        }
        th,td{
            height: 50px;
            width: 80px;
            line-height: 50px;
            overflow: hidden;
            text-align: center;
        }
        th{
            color: #1E304F;
            background-color: #F3F8FF;
        }
        td{
            color: #384967;
        }
        tr:nth-of-type(odd){
            background: #E7F2FF;
        }
        /*可以美化一下滾動條*/
        #right-div2::-webkit-scrollbar {/*滾動條整體樣式*/
            width: 4px;
            height: 4px;
        }
        #right-div2::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/
            border-radius: 5px;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }
        #right-div2::-webkit-scrollbar-track {/*滾動條裡面軌道*/
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0,0,0,0.1);
        }

  如果是在移動端可以直接將scrollbar寬高設為0，後面兩部分都不要了，個人感覺這種表格應用場景應該基本都在移動端。
  最後js部分很簡單，不過也是關鍵的一步(基於jQuery)

            //生成表格內容
            let htmlLeft = '';
            let htmlRight = '';
            for(let i=1;i<=7;i++){
                htmlLeft +='<tr>';
                htmlLeft +='<td>'+i+'</td>';
                htmlLeft +='</tr>';
            }
            for(let i=1;i<=7;i++){
                htmlRight+='<tr>';
                htmlRight+='<td>A</td>';
                htmlRight+='<td>100</td>';
                htmlRight+='<td>500</td>';
                htmlRight+='<td>1</td>';
                htmlRight+='</tr>';
            }
            $('#left-table2').html(htmlLeft);
            $('#right-table2').html(htmlRight);
            //滾動
            $('#right-div2').on('scroll',function(){
                let top=$(this).scrollTop();
                let left=$(this).scrollLeft();
                $('#left-div2').scrollTop(top);
                $('#right-div1').scrollLeft(left);
            })

  生成內容沒什麼好說的，主要是第一行和第一列要根據右下角部分一起移動。
最後看看效果圖

ps：有這樣一段css

        #left-table2{
            margin-bottom: 4px;
        }

  如果左側不設定margin-bottom的話會出現什麼問題呢

  可見滾動條佔據了一定的位置，其實橫向滾動的時候第一行也有這個問題，只不過看得不明顯而已，但是在移動端上隱藏滾動條的話是不會出現這種問題啦。