Nested table inherits classes that cannot be reset

[SchmalzMGM]

The documentation states that "All table styles are inherited in Bootstrap 4", which already feels like a horrible decision for me, because it's completly unintuitive. And for worse it even passes styling to native

tags that do not reference any bootstrap classes.

<table class="table-bordered table-striped">
	<table>
		...
	</table>
</table>

The above example would cause the inner table to be both bordered and striped, just like the containing table. Using table-borderless on the inner table it is possible to get rid of the border but I haven't found a way to prevent the passing of the striped styling.

Is this intended behaviour? It seems really buggy and user-unfriendly to force styling upon child elements which don't use bootstrap classes without even giving a possibility to neutralize the inherited styling. (Maybe there is a possibility to overwrite stylings like table-striped, but I haven't found any classes like "table-nostripe" that would overwrite the striped effect).

[XhmikosR]

Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and Operating System details.

This is an automated reply

[mdo]

We had the reverse in v3 and it led to far too restrictive and complex selectors. This was decided long ago in v4's early development that we'd inherit these styles.

[dimitor115]

@mdo @XhmikosR Shouldn't it be rethought during the v5 development. This is really unexpected behavior and I have faced a lot of problems in my recent projects due to this implementation. Nowadays it's common to implement some details in the expandable row details section, and often we need to put some table there and this is really flustering that this table inherits styles like striped or fixed from its parent.

I don't agree that it would complicate the selectors too much, for example:

.table-striped {
  & > tbody > tr:nth-of-type(#{$table-striped-order}) {
    background-color: $table-accent-bg;
  }
}

instead of

.table-striped {
  tbody tr:nth-of-type(#{$table-striped-order}) {
    background-color: $table-accent-bg;
  }
}

[XhmikosR]

/CC @twbs/css-review ^^