Я использую загрузчик и у меня есть таблица внутри тега, которую я хочу прокручивать как по горизонтали, так и по вертикали.Заголовок таблицы является фиксированным и прокручивается только тело.Сценарий, который у меня работает, работает нормально, когда он внутри обычного HTML без, но он отображает данные из переполненных столбцов и не обновляется должным образом.Есть идеи, как это можно исправить?Прикрепленный снимок экрана.
<script>
$('table').on('scroll', function() {
$("#" + this.id + " > *").width($(this).width() + $(this).scrollLeft());
});
</script>
<style>
html {
font-family: verdana;
font-size: 10pt;
line-height: 25px;
}
table {
border-collapse: collapse;
width: 30000px;
overflow-x: scroll;
display: block;
}
thead {
background-color: #EFEFEF;
}
thead,
tbody {
display: block;
}
tbody {
overflow-y: hidden;
overflow-x: hidden;
height: 140px;
}
td,
th {
min-width: 100px;
height: 25px;
border: dashed 1px lightblue;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
</style>
<div ng-app="CCARApp" ng-controller="TaskController" data-ng-init="fetchTasks()" id="tabcontainer" class="tab-content container" style="height:100%;width:100%; display: flex;flex-direction: column;border-style: solid; border-color: blue;" onscroll="myFunction(this)">
<div id="14A Tasks" class="tab-pane fade in active col-sm-6 col-md-6 table-responsive" style="height:100%;width:100%; border-style: solid; border-color: coral;" style="overflow-x:auto; overflow-y:auto;">
<div class="spinner" ng-show="showLoader">
<img src="./images/spinner.gif" align="middle" >
</div>
<input class="form-control" id="delayedInput" type="text" placeholder="Search.."/>
<br>
<table id="tab" class="table" >
<thead>
<tr>
<th>Process</th>
<th>Task Id</th>
<th>Task Mode</th>
<th>Group</th>
<th>Task Name</th>
<th>Duration</th>
<th>Start Date</th>
<th>Finish Date</th>
<th>Predecessors</th>
<th>Owner 1</th>
<th>Owner 2</th>
<th>Escalation</th>
<th>Last Updated By</th>
<th>Last Updated Date</th>
<th>Status</th>
<th>Comments</th>
</tr>
</thead>
<tbody style="height: 500px !important; overflow-y:scroll; ">
<tr >
<td >test1</td>
<td >test2</td>
<td >test3</td>
<td >test4</td>
<td >test5</td>
<td >test6</td>
<td >test7</td>
<td >test8</td>
<td >test9</td>
<td >test10</td>
<td >test11</td>
<td >test12</td>
<td >test13</td>
<td >test14</td>
<td >test15</td>
<td >test16</td>
</tr>
<tr >
<td >test1</td>
<td >test2</td>
<td >test3</td>
<td >test4</td>
<td >test5</td>
<td >test6</td>
<td >test7</td>
<td >test8</td>
<td >test9</td>
<td >test10</td>
<td >test11</td>
<td >test12</td>
<td >test13</td>
<td >test14</td>
<td >test15</td>
<td >test16</td>
</tr>
<tr >
<td >test1</td>
<td >test2</td>
<td >test3</td>
<td >test4</td>
<td >test5</td>
<td >test6</td>
<td >test7</td>
<td >test8</td>
<td >test9</td>
<td >test10</td>
<td >test11</td>
<td >test12</td>
<td >test13</td>
<td >test14</td>
<td >test15</td>
<td >test16</td>
</tr>
<tr >
<td >test1</td>
<td >test2</td>
<td >test3</td>
<td >test4</td>
<td >test5</td>
<td >test6</td>
<td >test7</td>
<td >test8</td>
<td >test9</td>
<td >test10</td>
<td >test11</td>
<td >test12</td>
<td >test13</td>
<td >test14</td>
<td >test15</td>
<td >test16</td>
</tr>
<tr >
<td >test1</td>
<td >test2</td>
<td >test3</td>
<td >test4</td>
<td >test5</td>
<td >test6</td>
<td >test7</td>
<td >test8</td>
<td >test9</td>
<td >test10</td>
<td >test11</td>
<td >test12</td>
<td >test13</td>
<td >test14</td>
<td >test15</td>
<td >test16</td>
</tr>
<tr >
<td >test1</td>
<td >test2</td>
<td >test3</td>
<td >test4</td>
<td >test5</td>
<td >test6</td>
<td >test7</td>
<td >test8</td>
<td >test9</td>
<td >test10</td>
<td >test11</td>
<td >test12</td>
<td >test13</td>
<td >test14</td>
<td >test15</td>
<td >test16</td>
</tr>
<tr >
<td >test1</td>
<td >test2</td>
<td >test3</td>
<td >test4</td>
<td >test5</td>
<td >test6</td>
<td >test7</td>
<td >test8</td>
<td >test9</td>
<td >test10</td>
<td >test11</td>
<td >test12</td>
<td >test13</td>
<td >test14</td>
<td >test15</td>
<td >test16</td>
</tr>
<tr >
<td >test1</td>
<td >test2</td>
<td >test3</td>
<td >test4</td>
<td >test5</td>
<td >test6</td>
<td >test7</td>
<td >test8</td>
<td >test9</td>
<td >test10</td>
<td >test11</td>
<td >test12</td>
<td >test13</td>
<td >test14</td>
<td >test15</td>
<td >test16</td>
</tr>
<tr >
<td >test1</td>
<td >test2</td>
<td >test3</td>
<td >test4</td>
<td >test5</td>
<td >test6</td>
<td >test7</td>
<td >test8</td>
<td >test9</td>
<td >test10</td>
<td >test11</td>
<td >test12</td>
<td >test13</td>
<td >test14</td>
<td >test15</td>
<td >test16</td>
</tr>
<tr >
<td >test1</td>
<td >test2</td>
<td >test3</td>
<td >test4</td>
<td >test5</td>
<td >test6</td>
<td >test7</td>
<td >test8</td>
<td >test9</td>
<td >test10</td>
<td >test11</td>
<td >test12</td>
<td >test13</td>
<td >test14</td>
<td >test15</td>
<td >test16</td>
</tr>
</tbody>
</table>
</div>
