Я использую bootstrap, и у меня есть таблица внутри тега, которую я хочу прокручивать как по горизонтали, так и по вертикали. Заголовок таблицы фиксирован, и прокручивается только тело. Скрипт, который у меня есть, отлично работает, когда он находится внутри простого 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>



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Решили эту проблему, удалив отображение: блок в теге таблицы.