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

目标输出

Spreadsheet example of freezed multiple rows and columns

盒子结构

制作一个<div>容器，它将成为可滚动的组件。确保<div>容器具有固定的width和height，并且应小于实际内容。
让B，C和D为冻结的行和列。
让A为实际的表格内容。
使用A标签使组件B，C，D和<table>组成。

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

冻结HTML表的多行多列

1 个答案:

目标输出

盒子结构

HTML

CSS

JavaScript / jQuery