Таблица и полоса прокрутки не обновляются

Я использую 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>

Таблица и полоса прокрутки не обновляются

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
27
1

Ответы 1

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

Другие вопросы по теме