Nested table inside model inherits parent table's styles
Created by: Diodamez
While migrating from V4 to V5, the nested table now inherits the table-hover style of the parent table, and applies the hover-color to all cells of the nested table. This didn't happen in V4.
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Button</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
</tr>
</thead>
<tbody id="tabla-body">
<tr>
<td>
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modal">
Open Modal
</button>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="scope">Item 1</th>
<th class="scope">Item 2</th>
<th class="scope">Item 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>11</th>
<th>22</th>
<th>33</th>
</tr>
<tr>
<th>11</th>
<th>22</th>
<th>33</th>
</tr>
<tr>
<th>11</th>
<th>22</th>
<th>33</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>