Freeze Multiple Rows & Multiple Columns of HTML Table

Question

I have a HTML table which is generated by back-end (C#). I want to Fix the Header (2 Rows having Sale Type & Location) and First Two columns (Product Name & Description).

My table looks like the following:

The Header Row has a rowspan of 2 & the First Two columns(Under Description) also need to be freezed.

I have tried the following code:

<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>

it only freezed the First Column, NOR first Two columns, NOR first two Rows.

How can I achieve this please Help thanks

Answer 1

Target output

Spreadsheet example of freezed multiple rows and columns

Box structure

1. Make a <div> container that will be the scrollable component. Make sure the <div> container has a fixed width and height , and should be smaller than the actual content.
2. Let B , C , and D be the freezed rows and columns.
3. Let A be the actual table content.
4. Make the components A , B , C , and D using the <table> tag.

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');
});