Bootstrap强制表条带化

Question

我在桌子里面有一张桌子。在外面的桌子上，我想要条纹和边框，但在内层我不喜欢。我做到了。

<table class="table table-bordered table-sm table-striped">
  <tbody>
      <tr>
          <td>
              <table class="table table-sm table-borderless" style="margin: 0">

外部和内部表都有条带化。如何强制内部表格没有条纹或边框？

Answer 1

根据Bootstrap docs ...

  

＆＃34; 所有表样式都在Bootstrap 4中继承，这意味着任何嵌套   表格的样式与父母一样。＆＃34;

因此，为了覆盖嵌套表格上的条纹，您必须添加一点CSS ......

.table-nostriped tbody tr:nth-of-type(odd) {
  background-color:transparent;
}

<table class="table table-bordered table-sm table-striped">
    <tbody>
        <tr>
            <td>
                <table class="table table-sm table-borderless table-nostriped">
                </table>
            </td>
        </tr>
    </tbody>
</table>

https://www.codeply.com/go/95b4ecfFP7