冻结 HTML 表格的多行多列
Posted
技术标签:
【中文标题】冻结 HTML 表格的多行多列【英文标题】：Freeze Multiple Rows & Multiple Columns of HTML Table 【发布时间】：2019-04-19 08:17:21 【问题描述】：我有一个由后端 (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 前两行。
我怎样才能做到这一点请帮助 谢谢
【问题讨论】：
【参考方案1】：目标输出
Spreadsheet example of freezed multiple rows and columns
盒子结构
-
制作一个
<div> 容器，它将成为可滚动组件。确保<div> 容器有固定的width 和height，并且应该小于实际内容。
让B、C 和D 成为冻结的行和列。
让A 成为实际的表格内容。
使用<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');
);
【讨论】：
以上是关于冻结 HTML 表格的多行多列的主要内容，如果未能解决你的问题，请参考以下文章