Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested table inside model inherits parent table's styles #33817

Closed
Diodamez opened this issue May 4, 2021 · 2 comments · Fixed by #33825
Closed

Nested table inside model inherits parent table's styles #33817

Diodamez opened this issue May 4, 2021 · 2 comments · Fixed by #33825

Comments

@Diodamez
Copy link

Diodamez commented May 4, 2021

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>
@Hintzmann
Copy link

Hintzmann commented May 4, 2021

The following hot-fix solves the problem:

.table {
  --bs-table-accent-bg: transparent;
}

Note: The color "transparent" might vary from your setup.

A more permantly fix could be to add this to _tables.scss:

.table {
--#{$variable-prefix}table-accent-bg: #{$table-bg};
}

@ffoodd
Copy link
Member

ffoodd commented May 4, 2021

PR is not merged yet, please keep this issue open for now :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants