twitter-bootstrap 如何使 Bootstrap 表内的嵌套表不继承父 Bootstrap“表”类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52861931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make nested table inside Bootstrap table not inherit the parent Bootstrap "table" class?
提问by Casey Crookston
I have two tables, one nested in side the other. The parent table has class="table table-bordered table-hover"which brings all of the auto-magic sweet Bootstrap goodness that we all know and love.
我有两张桌子，一张嵌套在另一个旁边。父表具有class="table table-bordered table-hover"我们都知道和喜爱的所有自动魔法甜蜜 Bootstrap 优点。
But, inside of this parent table, I need a nested table. By default, this nested table inherits all of the same classes as the parent. In this case, this is causing problems. I need this nested table to NOT have any of the sweet Bootstrap goodness. It needs to be just a normal non-Bootstrap table.
但是，在这个父表中，我需要一个嵌套表。默认情况下，这个嵌套表继承所有与父表相同的类。在这种情况下，这会导致问题。我需要这个嵌套表没有任何甜蜜的 Bootstrap 优点。它需要只是一个普通的非 Bootstrap 表。
Is there a fast and easy way to tell the nested table to NOT inherit all the css elements of the parent table?
有没有一种快速简便的方法来告诉嵌套表不要继承父表的所有 css 元素？
(The snippet below is not an exact representation of what I'm dealing with, but it's a good POC we can use to find a solution.)
（下面的代码片段并不是我正在处理的内容的准确表示，但它是我们可以用来找到解决方案的一个很好的 POC。）
Thanks!
谢谢！
<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>采纳答案by Zim
Basically, this has already been answered here. As stated in the docs...
"All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent."
“所有表格样式都在 Bootstrap 4 中继承，这意味着任何嵌套表格都将以与父表格相同的方式设置样式。”
Therefore you'd have to add some overriding CSS to "reset" the inner table...
因此，您必须添加一些覆盖 CSS 来“重置”内部表格...
.table-plain tbody tr,
.table-plain tbody tr:hover,
.table-plain tbody td {
background-color:transparent;
border:none;
}
