凍結 HTML 表格的多行和多列

Question

我有一個由后端（C#）生成的 HTML 表。 我想修復標題（2 行具有銷售類型和位置）和前兩列（產品名稱和描述）。

我的表如下所示：

標題行的行跨度為 2，前兩列（描述下）也需要凍結。

我嘗試了以下代碼：

<script>
$(document).ready(function() {
  $('tbody').scroll(function(e) { //detect a scroll event on the tbody
    /*
    Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
    of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain             it's relative position at the left of the table.    
    */
    $('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
      $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
      $('.firstrow').css("left", $("tbody").scrollLeft());

  });
});

    </script>
 <table id="ContentPlaceHolder1_tbl_Currentday" class="table table-responsive ReportTbl  table-bordered">
    <tr class="firstrow">
        <th colspan="2" rowspan="2">Description</th><th colspan="12">Daily Sales</th><th colspan="11">MONTH TO DATE SALES</th><th colspan="3">FORECAST</th><th colspan="12">AVAILABLE STOCK</th><th colspan="10">IN TRANSIT QUANTITY</th>
    </tr>
        <tr class="firstrow">
        <th>PROD QTY</th><th>KHI</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th><th>KHI</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th><th>MTD</th><th>TOTAL</th><th class="totaltd">ACH%</th><th>FAC</th><th>KHI</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th>
    </tr><tr>
        <td rowspan="3" style="font-weight:bold;">          AAMRUS</td><td>  AAMRUS CANDY - (BAG) - (35X60) - (670)</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td class="totaltd">0</td><td>3,572</td><td>202</td><td>926</td><td>36</td><td>414</td><td>1,417</td><td>562</td><td>0</td><td>1,310</td><td>0</td><td class="totaltd">8,439</td><td>9,065</td><td>16,997</td><td class="totaltd">93.09%</td><td>2,426</td><td>432</td><td>531</td><td>0</td><td>167</td><td>651</td><td>327</td><td>243</td><td>4</td><td>0</td><td>36</td><td class="totaltd">2,391</td><td>0</td><td>0</td><td>0</td><td>0</td><td>152</td><td>304</td><td>0</td><td>228</td><td>0</td><td class="totaltd">684</td>
    </tr><tr>
        <td>  AAMRUS CANDY - (BOX) - (70X30) - (1032)</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td class="totaltd">0</td><td>1,126</td><td>1,462</td><td>1,270</td><td>333</td><td>737</td><td>1,576</td><td>813</td><td>575</td><td>218</td><td>60</td><td class="totaltd">8,170</td><td>9,068</td><td>17,003</td><td class="totaltd">90.1%</td><td>4,872</td><td>723</td><td>590</td><td>964</td><td>522</td><td>613</td><td>597</td><td>634</td><td>441</td><td>646</td><td>74</td><td class="totaltd">5,804</td><td>0</td><td>441</td><td>252</td><td>252</td><td>315</td><td>126</td><td>252</td><td>0</td><td>0</td><td class="totaltd">1,638</td>
    </tr><tr class="totaltd">
        <td>Total</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>4,698</td><td>1,664</td><td>2,196</td><td>369</td><td>1,151</td><td>2,993</td><td>1,375</td><td>575</td><td>1,528</td><td>60</td><td>16,609</td><td>18,133</td><td>34,000</td><td>91.6%</td><td>7,298</td><td>1,155</td><td>1,121</td><td>964</td><td>689</td><td>1,264</td><td>924</td><td>877</td><td>445</td><td>646</td><td>110</td><td>8,195</td><td>0</td><td>441</td><td>252</td><td>252</td><td>467</td><td>430</td><td>252</td><td>228</td><td>0</td><td>2,322</td>
    </tr>
</table>

它只凍結了第一列，NOR 前兩列，NOR 前兩行。

我怎樣才能做到這一點請幫助謝謝

Answer 1

目標輸出

凍結多行多列的電子表格示例

箱體結構

1. 制作一個<div>容器作為可滾動組件。 確保<div>容器具有固定的width和height ，並且應該小於實際內容。
2. 設B 、 C和D是凍結的行和列。
3. 讓A成為實際的表格內容。
4. 使用<table>標記制作組件A 、 B 、 C和D 。

HTML

<div id="container">
    <table id="a">
        <thead>
            <tr>
                <th>A1</th>
                <th>A2</th>
                <th>A3</th>
                <th>A4</th>
            </tr>
            <tr>
                <th>B1</th>
                <th>B2</th>
                <th>B3</th>
                <th>B4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>C1</td>
                <td>C2</td>
                <td>C3</td>
                <td>C4</td>
            </tr>
            <tr>
                <td>D1</td>
                <td>D2</td>
                <td>D3</td>
                <td>D4</td>
            </tr>
        </tbody>
    </table>
    <table id="b">
        <thead>
            <tr>
                <th>A1</th>
                <th>A2</th>
                <th>A3</th>
                <th>A4</th>
            </tr>
            <tr>
                <th>B1</th>
                <th>B2</th>
                <th>B3</th>
                <th>B4</th>
            </tr>
        </thead>
    </table>
    <table id="c">
        <thead>
            <tr>
                <th>A1</th>
                <th>A2</th>
            </tr>
            <tr>
                <th>B1</th>
                <th>B2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>C1</td>
                <td>C2</td>
            </tr>
            <tr>
                <td>D1</td>
                <td>D2</td>
            </tr>
        </tbody>
    </table>
    <table id="d">
        <thead>
            <tr>
                <th>A1</th>
                <th>A2</th>
            </tr>
            <tr>
                <th>B1</th>
                <th>B2</th>
            </tr>
        </thead>
    </table>
</div>

CSS

#container{
    width:90px;
    max-height:90px;
    overflow: auto;
    position: relative;
}
#a{
    position: relative;
    z-index: 1
}
#b{
    background: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2
}
#c{
    background: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2
}
#d{
    background: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 3  
}

JavaScript / jQuery

$('#container').scroll(function(event) {
    var scrolledX = $(this).scrollLeft();
    var scrolledY = $(this).scrollTop();
    $(this).find('#c').css('left',scrolledX+'px');
    $(this).find('#b').css('top',scrolledY+'px');
    $(this).find('#d').css('left',scrolledX+'px');
    $(this).find('#d').css('top',scrolledY+'px');
});