这是我要完成的工作的鸟瞰图，并且在大多数情况下都有效。我试图使表格的行为像Excel工作表一样，在滚动时标题保留在原处。
因此，我创建了一个仅包含标题的表，然后每个选项卡中都有表。页面首次加载时，它将获取每一列的大小，并使我的标题表（hTable）列的宽度匹配。调整浏览器大小时，将触发该功能，因此所有内容均匹配。一切都按我需要的进行。
现在，当我尝试使用jQuery单击选项卡时出现问题。由于某种原因，该行中断了调整大小的代码。我将click函数放置在页面底部，在函数外部的$（function）顶部。 1行代码破坏了我的大小调整功能，我不知道为什么。
下面您将找到我的代码和代码的结构。我已经删除了表的内容，但是结构仍然相同。
<html>
<head>
<script type="text/javascript">
//<![CDATA[
var curTab = 'E';
$(function(){
hTableResize();
$(window).resize(hTableResize);
$('#tab-'+curTab).click(); // *** THIS BREAKS THE FUNCTIONALITY ***
}); //$(function){}
function hTableResize(){
$('.cTable thead').hide();
var col1 = $('.cTable td:eq(0)').width();
var col2 = ($('.cTable td:eq(1)').width());
var col3 = ($('.cTable td:eq(2)').width());
var col4 = $('.cTable td:eq(3)').width();
$('.hTable').css('width',col1+col2+col3+col4+'px !important');
$('.hTable th:eq(0)').width(col1);
$('.hTable th:eq(1)').width(col2);
$('.hTable th:eq(2)').width(col3);
$('.hTable th:eq(3)').width(col4);
}
//]]>
</script>
</head>
<body>
<div id="contenContainer">
<p><span style="font-size:larger;"><b>Clients</b></span><br>
<a href="#" class="but-editClientModal" data-clientid="0">+ Add Client</a></p>
<ul class="nav nav-tabs" role="tablist" style="margin-top:7px; background-color:#ffffff; width: 100%;">
<li role="presentation" class="" id="tA"><a href="#secA" aria-controls="secA" role="tab" data-toggle="tab" id="tab-A" onclick="tab='A';" aria-expanded="false">A</a></li>
<li role="presentation" id="tB"><a href="#secB" aria-controls="secB" role="tab" data-toggle="tab" id="tab-B" onclick="tab='B';">B</a></li>
<li role="presentation" id="tC"><a href="#secC" aria-controls="secC" role="tab" data-toggle="tab" id="tab-C" onclick="tab='C';">C</a></li>
<li role="presentation" id="tD"><a href="#secD" aria-controls="secD" role="tab" data-toggle="tab" id="tab-D" onclick="tab='D';">D</a></li>
<li role="presentation" id="tE"><a href="#secE" aria-controls="secE" role="tab" data-toggle="tab" id="tab-E" onclick="tab='E';">E</a></li>
<li role="presentation" id="tF"><a href="#secF" aria-controls="secF" role="tab" data-toggle="tab" id="tab-F" onclick="tab='F';">F</a></li>
</ul>
<table class="table-bordered table-hover table-striped hTable">
<tbody><tr style="background-color:#ffffff;">
<th nowrap="" style="text-align: center; width: 82px;">Code</th>
<th nowrap="" style="width: 0px;">Client Name</th>
<th style="text-align: center; width: 184px;">Sub</th>
<th nowrap="" style="text-align: center; width: 149px;">Consignor/Consignee <br>
Required</th>
</tr>
</tbody></table>
<div style="overflow-y: scroll; height:100%;">
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="secA">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="secB">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="secC">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="secD">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="secE">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="secF">
<table class="table table-bordered table-hover table-striped cTable" style="margin-bottom:250px;">
<thead style="display: none;">
<tr style="background-color:#ffffff;">
<!-- <th nowrap align="center">ID</th> -->
<th nowrap="" align="center"> Code </th>
<th nowrap="">Client Name</th>
<th align="center">Sub</th>
<th nowrap="" style="text-align:center;">Consignor/Consignee <br>
Required</th>
</tr>
</thead>
</table>
</div>
</div>
</div> <!-- <div style="overflow-y: scroll;"> -->
</div>
</body>
</html>