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屋！