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>