我有两个具有可变列数的html表。我正在使用js通过将要冻结的列克隆到新分区并将其隐藏在原始分区中来创建“冻结”列。
原始分区可以滚动，具有最大宽度和溢出。
对于大多数浏览器，此功能均不会出现任何问题。 Safari除外。
在Safari中，在某些情况下JS完成后，顶层表（仅顶层表）的可滚动div不会呈现。
内容位于检查器中，并且从我的js函数中应用了所有更改，但是显示为空白，直到用户等待30秒并滚动或与任何更改正文大小的页面元素进行交互。
仅当可滚动div中没有滚动条时，才会发生此行为。
有没有人以前看到过Safari的类似行为，如何解决？
编辑：我无法在完整环境之外重现此内容，但是这里是基本代码的副本：
https://jsfiddle.net/nknapp/q0xhgtzp/25/
HTML
<div id="divContentSum" class="col-12">
<div id="ctSumLeftTableSpan" class="name-table" >
</div>
<div id="ctSumMain" class="values-table">
<div id="tableDiv-ctSum">
<table style="" summary="True" class="table-cell" id="ctSum">
<colgroup>
<col id="colLbl">
<col id="colValueSum">
<col id="colTot">
</colgroup>
<thead style="display:table-header-group">
<tr class="cb-table-header h48">
<th scope="col" class="tbl-head" id="colBlank"><span>Type</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-0" colspan="1" ><span class="font-table-heavy font-white">Col1</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-1" colspan="1" ><span class="font-table-heavy font-white">Col2</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-2" colspan="1" ><span class="font-table-heavy font-white">Col3</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-3" colspan="1" ><span class="font-table-heavy font-white">Col4</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-4" colspan="1" ><span class="font-table-heavy font-white">Col5</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-5" colspan="1" ><span class="font-table-heavy font-white">Col6</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-6" colspan="1" ><span class="font-table-heavy font-white">Col7</span></th>
<th scope="col" class="tbl-head" id="colhName"><span>Totals</span></th>
</tr>
</thead>
<tbody>
<tr row="1">
<td id="colLbl_Row1" headers="colLbl-TH colBlank" class=""><span>Number</span></td>
<td id="colValueSum_CtCol0_Row1" class="" headers="colValueSum-TH colhName"><span>14</span></td>
<td id="colValueSum_CtCol1_Row1" class="" headers="colValueSum1-TH colhName"><span>14</span></td>
<td id="colValueSum_CtCol2_Row1" class="" headers="colValueSum2-TH colhName"><span>14</span></td>
<td id="colValueSum_CtCol3_Row1" class="" headers="colValueSum3-TH colhName"><span>5</span></td>
<td id="colValueSum_CtCol4_Row1" class="" headers="colValueSum4-TH colhName"><span>29</span></td>
<td id="colValueSum_CtCol5_Row1" class="" headers="colValueSum5-TH colhName"><span>1</span></td>
<td id="colValueSum_CtCol6_Row1" class="" headers="colValueSum6-TH colhName"><span>6</span></td>
<td id="colTot_Row1" headers="colTot-TH" class=""><span>128</span></td>
</tr>
<tr row="2">
<td id="colLbl_Row2" headers="colLbl-TH colBlank" class=""><span>Average</span></td>
<td id="colValueSum_CtCol0_Row2" class="" headers="colValueSum-TH colhName"><span>2.4</span></td>
<td id="colValueSum_CtCol1_Row2" class="" headers="colValueSum1-TH colhName"><span>4.4</span></td>
<td id="colValueSum_CtCol2_Row2" class="" headers="colValueSum2-TH colhName"><span>3.9</span></td>
<td id="colValueSum_CtCol3_Row2" class="" headers="colValueSum3-TH colhName"><span>2.2</span></td>
<td id="colValueSum_CtCol4_Row2" class="" headers="colValueSum4-TH colhName"><span>3.1</span></td>
<td id="colValueSum_CtCol5_Row2" class="" headers="colValueSum5-TH colhName"><span>5.0</span></td>
<td id="colValueSum_CtCol6_Row2" class="" headers="colValueSum6-TH colhName"><span>3.3</span></td>
<td id="colTot_Row2" headers="colTot-TH" class=""><span>3.3</span></td>
</tr>
<tr row="3">
<td id="colLbl_Row3" headers="colLbl-TH colBlank" class=""><span>Percent</span></td>
<td id="colValueSum_CtCol0_Row3" class="" headers="colValueSum-TH colhName"><span>43%</span></td>
<td id="colValueSum_CtCol1_Row3" class="" headers="colValueSum1-TH colhName"><span>100%</span></td>
<td id="colValueSum_CtCol2_Row3" class="" headers="colValueSum2-TH colhName"><span>100%</span></td>
<td id="colValueSum_CtCol3_Row3" class="" headers="colValueSum3-TH colhName"><span>40%</span></td>
<td id="colValueSum_CtCol4_Row3" class="" headers="colValueSum4-TH colhName"><span>76%</span></td>
<td id="colValueSum_CtCol5_Row3" class="" headers="colValueSum5-TH colhName"><span>100%</span></td>
<td id="colValueSum_CtCol6_Row3" class="" headers="colValueSum6-TH colhName"><span>67%</span></td>
<td id="colTot_Row3" headers="colTot-TH" class=""><span>76%</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="ctSumRightTableSpan" class="totals-table-det" >
</div>
</div>
<div id="divContentDet" class="col-12">
<div id="ctDetLeftTableSpan" class="name-table-det" >
</div>
<div id="ctDetMain" class="values-table-det">
<div id="tableDiv-ctDet">
<table style="" Detmary="True" class="table-cell" id="ctDet">
<colgroup>
<col id="colLbl">
<col id="colValueDet">
<col id="colTot">
</colgroup>
<thead style="display:table-header-group">
<tr class="cb-table-header h48">
<th scope="col" class="tbl-head" id="colBlank"><span>Type</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-0" colspan="1" ><span class="font-table-heavy font-white">Col1</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-1" colspan="1" ><span class="font-table-heavy font-white">Col2</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-2" colspan="1" ><span class="font-table-heavy font-white">Col3</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-3" colspan="1" ><span class="font-table-heavy font-white">Col4</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-4" colspan="1" ><span class="font-table-heavy font-white">Col5</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-5" colspan="1" ><span class="font-table-heavy font-white">Col6</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-6" colspan="1" ><span class="font-table-heavy font-white">Col7</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-7" colspan="1" ><span class="font-table-heavy font-white">Col8</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-8" colspan="1" ><span class="font-table-heavy font-white">Col9</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-9" colspan="1" ><span class="font-table-heavy font-white">Col10</span></th>
<th scope="col" class="tbl-head" id="ctSpanner-10" colspan="1" ><span class="font-table-heavy font-white">Col11</span></th>
<th scope="col" class="tbl-head" id="colhName"><span>Totals</span></th>
</tr>
</thead>
<tbody>
<tr row="1">
<td id="colLbl_Row1" headers="colLbl-TH colBlank" class=""><span>Number</span></td>
<td id="colValueDet_CtCol0_Row1" class="" headers="colValueDet-TH colhName"><span>14</span></td>
<td id="colValueDet_CtCol1_Row1" class="" headers="colValueDet1-TH colhName"><span>14</span></td>
<td id="colValueDet_CtCol2_Row1" class="" headers="colValueDet2-TH colhName"><span>14</span></td>
<td id="colValueDet_CtCol3_Row1" class="" headers="colValueDet3-TH colhName"><span>5</span></td>
<td id="colValueDet_CtCol4_Row1" class="" headers="colValueDet4-TH colhName"><span>29</span></td>
<td id="colValueDet_CtCol5_Row1" class="" headers="colValueDet5-TH colhName"><span>1</span></td>
<td id="colValueDet_CtCol6_Row1" class="" headers="colValueDet6-TH colhName"><span>6</span></td>
<td id="colValueDet_CtCol7_Row1" class="" headers="colValueDet7-TH colhName"><span>10</span></td>
<td id="colValueDet_CtCol8_Row1" class="" headers="colValueDet8-TH colhName"><span>21</span></td>
<td id="colValueDet_CtCol9_Row1" class="" headers="colValueDet9-TH colhName"><span>13</span></td>
<td id="colValueDet_CtCol10_Row1" class="" headers="colValueDet10-TH colhName"><span>1</span></td>
<td id="colTot_Row1" headers="colTot-TH" class=""><span>128</span></td>
</tr>
<tr row="2">
<td id="colLbl_Row2" headers="colLbl-TH colBlank" class=""><span>Average</span></td>
<td id="colValueDet_CtCol0_Row2" class="" headers="colValueDet-TH colhName"><span>2.4</span></td>
<td id="colValueDet_CtCol1_Row2" class="" headers="colValueDet1-TH colhName"><span>4.4</span></td>
<td id="colValueDet_CtCol2_Row2" class="" headers="colValueDet2-TH colhName"><span>3.9</span></td>
<td id="colValueDet_CtCol3_Row2" class="" headers="colValueDet3-TH colhName"><span>2.2</span></td>
<td id="colValueDet_CtCol4_Row2" class="" headers="colValueDet4-TH colhName"><span>3.1</span></td>
<td id="colValueDet_CtCol5_Row2" class="" headers="colValueDet5-TH colhName"><span>5.0</span></td>
<td id="colValueDet_CtCol6_Row2" class="" headers="colValueDet6-TH colhName"><span>3.3</span></td>
<td id="colValueDet_CtCol7_Row2" class="" headers="colValueDet7-TH colhName"><span>3.8</span></td>
<td id="colValueDet_CtCol8_Row2" class="" headers="colValueDet8-TH colhName"><span>3.0</span></td>
<td id="colValueDet_CtCol9_Row2" class="" headers="colValueDet9-TH colhName"><span>3.5</span></td>
<td id="colValueDet_CtCol10_Row2" class="" headers="colValueDet10-TH colhName"><span>4.0</span></td>
<td id="colTot_Row2" headers="colTot-TH" class=""><span>3.3</span></td>
</tr>
<tr row="3">
<td id="colLbl_Row3" headers="colLbl-TH colBlank" class=""><span>Percent</span></td>
<td id="colValueDet_CtCol0_Row3" class="" headers="colValueDet-TH colhName"><span>43%</span></td>
<td id="colValueDet_CtCol1_Row3" class="" headers="colValueDet1-TH colhName"><span>100%</span></td>
<td id="colValueDet_CtCol2_Row3" class="" headers="colValueDet2-TH colhName"><span>100%</span></td>
<td id="colValueDet_CtCol3_Row3" class="" headers="colValueDet3-TH colhName"><span>40%</span></td>
<td id="colValueDet_CtCol4_Row3" class="" headers="colValueDet4-TH colhName"><span>76%</span></td>
<td id="colValueDet_CtCol5_Row3" class="" headers="colValueDet5-TH colhName"><span>100%</span></td>
<td id="colValueDet_CtCol6_Row3" class="" headers="colValueDet6-TH colhName"><span>67%</span></td>
<td id="colValueDet_CtCol7_Row3" class="" headers="colValueDet7-TH colhName"><span>80%</span></td>
<td id="colValueDet_CtCol8_Row3" class="" headers="colValueDet8-TH colhName"><span>76%</span></td>
<td id="colValueDet_CtCol9_Row3" class="" headers="colValueDet9-TH colhName"><span>69%</span></td>
<td id="colValueDet_CtCol10_Row3" class="" headers="colValueDet10-TH colhName"><span>100%</span></td>
<td id="colTot_Row3" headers="colTot-TH" class=""><span>76%</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="ctDetRightTableSpan" class="totals-table-det" >
</div>
</div>
JS（jQuery 3.3.1）
function stripFirstColumns(source,num) {
//clear any existing tables
$('#'+source+'LeftTableSpan').children().remove();
//construct left table
var $Tbl = $('<table id="'+source+'LeftTable">');
$Tbl.addClass( $('#'+source).attr('class'));
//copy header to get attributes and delete children
var $tHead = $('#'+source+' thead').clone().off().appendTo($Tbl);
$tHead.find('tr').remove();
//copy body without attributes or children
var $tBody = $Tbl.append(document.getElementById(source).getElementsByTagName('tbody')[0].cloneNode());
//count rows needed
var hRows = $('#'+source+' thead tr').not('.noLoop');
var bRows = $('#'+source+' tbody tr').not('.noLoop');
//clone header content
for(i= hRows.length -1 ; i >= 0 ; i--) {
//clone header rows and remove inner content, negative counting to preserve order
var $tRow = $('#'+source+' thead tr:eq('+i+')').clone(false).prependTo($tHead);
$tRow.find('th').remove();
for (j = 0; j < num; j++) {
//clone header cells and then remove cell from source, negative counting to preserve order
var $tCell = $('#'+source+' thead tr:eq('+i+') th:eq('+j+')').clone(true,true).appendTo($tRow);
$('#'+source+' thead tr:eq('+i+') th:eq('+j+')').hide();
}
}
//clone body content
for(i= bRows.length -1 ; i >= 0 ; i--) {
//clone body rows and remove inner content, negative counting to preserve order
var $tRow = $('#'+source+' tbody tr:eq('+i+')').clone(false).prependTo($tBody);
$tRow.find('td').remove();
for (j = 0; j < num; j++) {
//clone body cells and remove cell from source, negative counting to preserve order
var $tCell = $('#'+source+' tbody tr:eq('+i+') td:eq('+j+')').clone(true,true).appendTo($tRow);
$('#'+source+' tbody tr:eq('+i+') td:eq('+j+')').hide();
}
}
//insert table into the left span
$('#'+source+'LeftTableSpan').html($Tbl);
}
function stripLastColumns(source,num) {
//console.log('run right for '+source);
//clear any existing tables
$('#'+source+'RightTableSpan').children().remove();
var ignore = 'noLoop';
//construct right table
var $Tbl = $('<table id="'+source+'RightTable">');
$Tbl.addClass( $('#'+source).attr('class'));
//copy header to get attributes and delete children
var $tHead = $('#'+source+' thead').clone().off().appendTo($Tbl);
$tHead.find('tr').remove();
//copy body to get attributes and delete children
var $tBody = $Tbl.append(document.getElementById(source).getElementsByTagName('tbody')[0].cloneNode());
var hRows = $('#'+source+' thead tr').not('.noLoop');
var bRows = $('#'+source+' tbody tr').not('.noLoop');
var index = $('#'+source+' tbody tr:eq(0) td').length - 1;
//console.log('head '+hRows.length+' body '+bRows.length+' index '+index);
//clone header
for(i= hRows.length -1 ; i >= 0 ; i--) {
var $tRow = $('#'+source+' thead tr:eq('+i+')').clone(false).prependTo($tHead);
$tRow.find('th').remove();
for (j = 0; j < num; j++) {
var target = index - j;
var $tCell = $('#'+source+' thead tr:eq('+i+') th:eq('+target+')').clone(true,true).prependTo($tRow);
$('#'+source+' thead tr:eq('+i+') th:eq('+target+')').hide();
}
}
//clone body
for(i= bRows.length -1 ; i >= 0 ; i--) {
//console.log('clone body '+i);
var $tRow = $('#'+source+' tbody tr:eq('+i+')').clone(false).prependTo($tBody);
$tRow.find('td').remove();
for (j = 0; j < num; j++) {
var target = index - j;
//console.log('clone cell '+target);
var $tCell = $('#'+source+' tbody tr:eq('+i+') td:eq('+target+')').clone(true,true).prependTo($tRow);
$('#'+source+' tbody tr:eq('+i+') td:eq('+target+')').hide();
}
}
$('#'+source+'RightTableSpan').html($Tbl);
}
function fixHeights(source) {
//get number of rows
var rows = $('#'+source+' tr').length;
for (i = 0; i < rows; i++) {
//get heights from each row
var h1 = $('#'+source+'LeftTable tr:eq('+i+')').height();
var h2 = $('#'+source+' tr:eq('+i+')').height();
var h3 = $('#'+source+'RightTable tr:eq('+i+')').height();
//calculate max height
var hMax = Math.max(h1,h2,h3);
//console.log('row '+i+' - '+h1+','+h2+','+h3+' - Max = '+hMax);
//set the cells within the row to the max height
$('#'+source+'LeftTable tr:eq('+i+')').children().height(hMax);
$('#'+source+' tr:eq('+i+')').children().height(hMax)
$('#'+source+'RightTable tr:eq('+i+')').children().height(hMax)
}
$('#'+source+'Main').width($('#'+source+'Main').width()+1);
}
function makeScroll(source,left,right) {
//source is the ID of the source table, left and right are the number of columns on those sides to freeze
stripFirstColumns(source,left);
stripLastColumns(source,right);
fixHeights(source);
document.getElementById(source+'LeftTableSpan').setAttribute('aria-hidden', 'true');
document.getElementById(source+'Main').setAttribute('aria-hidden', 'true');
document.getElementById(source+'RightTableSpan').setAttribute('aria-hidden', 'true');
}
makeScroll('ctSum',1,1);
makeScroll('ctDet',1,1);
CSS
.name-table {
float:left;
max-width:130px;
}
.values-table {
float:left;
overflow:auto;
margin-top:0px;
max-width:300px;
}
.totals-table{
float:left;
max-width:80px;
}
.name-table-det {
float:left;
max-width:120px;
}
.values-table-det {
float:left;
overflow:auto;
margin-top:0px;
max-width:300px;
}
.totals-table-det{
float:left;
max-width:80px;
}
.z-0 {
z-index: 0;
}
th[id^=ctSpan] {
background: #505050!important;
background-color: #505050!important;
color: #f0f0f0;
border: 1px solid #d9d9d9;
font-size: .9rem;
}
#ctSum th, #nameTable th, #totalTable th {
background: #505050!important;
background-color: #505050!important;
color: #f0f0f0;
border: 1px solid #d9d9d9;
font-size: .9rem;
}
.col-12 {
width:100%;
display:block;
height:130px;
}