如何使 Bootstrap 表内的嵌套表不继承父 Bootstrap“表”类？

Question

我有两张桌子，一张嵌套在另一个旁边。父表具有class="table table-bordered table-hover"我们都知道和喜爱的所有自动魔法甜蜜 Bootstrap 优点。

但是，在这个父表中，我需要一个嵌套表。默认情况下，此嵌套表继承所有与父表相同的类。在这种情况下，这会导致问题。我需要这个嵌套表没有任何甜蜜的 Bootstrap 优点。它需要只是一个普通的非 Bootstrap 表。

有没有一种快速简便的方法来告诉嵌套表不要继承父表的所有 css 元素？

（下面的代码片段并不是我正在处理的内容的确切表示，但它是我们可以用来找到解决方案的一个很好的 POC。）

谢谢！

<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

基本上，这已经在这里得到了回答。如文档中所述...

“所有表格样式都在 Bootstrap 4 中继承，这意味着任何嵌套表格都将以与父表格相同的方式设置样式。”

因此，您必须添加一些覆盖 CSS 来“重置”内部表格...

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

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