CSS отменяется после открытия модального диалогового окна, загружающего внешнее HTML

Question

У меня есть мастер вкладок в моем проекте ASP. NET MVC, и на одной из вкладок я открываю модальное диалоговое окно, отображая html, полученное из внешнего api. Однако при закрытии мастера и переходе go на следующую вкладку стиль таблицы (цвет и толщина границы) на вкладке изменяется на стиль html в модальном диалоговом окне. То, что я до сих пор пробовал принудительно использовать стиль td, th, border через !important, но не имеет особого смысла. Итак, что мне делать в этом случае? Я не могу изменить стиль внешнего источника, который возвращает html на css. Я также попытался принудительно использовать его стиль через JavaScript (set css) после закрытия модального окна, но не так много смысла. Любая идея?

Вот некоторые из моих попыток на css и моей html странице:

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, 
.table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 8px;
    line-height: 1.42857 !important;
    vertical-align: top !important;
    border-top: 1px solid #e7ecf1 !important;
    vertical-align: middle !important;
}


<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>Aaaaaa </th>
            <!-- code omitted for brevity -->
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>Bbbbbbbbb</td>
                <!-- code omitted for brevity -->
            </tr>
        }
    </tbody>
</table>

Answer 1

Вы можете удалить тег <style> при закрытии модального окна:

// call this function on closing the modal
function deleteStyleTag() {
  const styleTag = document.querySelector('.modal style');
  // change selector according to your situation

  // remove the <style> tag
  styleTag.parentElement.removeChild(styleTag);
}