Within my ASP.NET MVC project, I am utilizing a tab wizard. On one of the tabs, I trigger a modal dialog by loading HTML content from an external API. However, once I close the wizard and navigate to the next tab, the table style (specifically border color and thickness) is impacted by the styling from the HTML in the modal dialog. I attempted overriding the styles for td, th, and borders using !important, but this approach did not yield desired results. Given these constraints, what steps should I take? It is important to note that modifying the CSS of the external HTML source being returned is not an option. I also experimented with applying styles via JavaScript after closing the modal, however, it had minimal impact. Any suggestions?
Below are snippets of my CSS attempts and the relevant HTML code:
.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>