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

基本上，它已经是answered here。如文档中所述...

“所有表样式都在Bootstrap 4中继承，表示任何嵌套表格将采用与父表格相同的样式。”

因此，您必须添加一些重要的CSS才能“重置”内部表...

{numbers.map( function(item) {
          return (<button class="button btn btn-light" id={item.id} onClick={this.handleClick.bind(this)}>{item.key}</button>);
        }

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

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

1 个答案: