Bootstrap 强制表条带化 [英] Bootstrap forcing table striping

问题描述

我在一张桌子里面有一张桌子.在外面的桌子上，我想要条纹和边框，但在里面的桌子上我不需要.我做到了.

I have a table inside of a table. On the outer table I want striping and borders, but on the inner one I don't. I did this.

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

外部 和 内部表都有条带化.如何强制该内表没有条纹或边框?

Both the outer and inner tables have striping. How can I force that inner table to not have stripes or borders?

推荐答案

根据 引导程序文档...

"所有表格样式都在 Bootstrap 4 中继承，意味着任何嵌套表格的样式将与父表格的样式相同."

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

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

So in order to override the stripes on the nested table you'd have to add a little 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

这篇关于Bootstrap 强制表条带化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！