How to make nested table inside Bootstrap table not inherit the parent Bootstrap "table" class?

Question

I have two tables, one nested in side the other. The parent table has class="table table-bordered table-hover" which brings all of the auto-magic sweet Bootstrap goodness that we all know and love.

But, inside of this parent table, I need a nested table. By default, this nested table inherits all of the same classes as the parent. In this case, this is causing problems. I need this nested table to NOT have any of the sweet Bootstrap goodness. It needs to be just a normal non-Bootstrap table.

Is there a fast and easy way to tell the nested table to NOT inherit all the css elements of the parent table?

(The snippet below is not an exact representation of what I'm dealing with, but it's a good POC we can use to find a solution.)

Thanks!

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<table class="table table-bordered table-hover">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>Nested 1a</td>
          <td>Nested 2a</td>
          <td>Nested 3a</td>
         <tr>
        <tr>
          <td>Nested 1b</td>
          <td>Nested 2b</td>
          <td>Nested 3b</td>
         <tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>Row 3</td>
  </tr>
 </table>

Answer 1

Basically, this has already been answered here. As stated in the docs...

"All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent."

Therefore you'd have to add some overriding CSS to "reset" the inner table...

.table-plain tbody tr,
.table-plain tbody tr:hover,
.table-plain tbody td {
  background-color:transparent;
  border:none;
}

https://www.codeply.com/go/o74652EDvj