Вот вид с высоты птичьего полета на то, что я пытаюсь достичь, и по большей части это работает. Я пытаюсь заставить мою таблицу вести себя как лист Excel, где заголовки остаются на месте при прокрутке.
Итак, я создал таблицу только с заголовками, а затем в каждой вкладке есть таблицы. Когда страница загружается впервые, она берет размер каждого столбца и выравнивает столбцы таблиц заголовков (hTable) по ширине. При изменении размера браузера он запускает эту функцию, поэтому все совпадает. Все работает отлично, как мне нужно.
Проблема теперь возникает, когда я пытаюсь нажать на вкладку с помощью jQuery. По какой-то причине эта строка нарушает код изменения размера. Я поместил функцию щелчка внизу страницы, вверху, в $ (функция), вне функции. Эта единственная строка кода нарушает мою функцию изменения размера, и я не могу понять, почему.
Ниже вы найдете мой код и структуру моего кода. Я удалил содержимое таблиц, но структура все та же.
<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>