Bootstrap: Nested table inherits classes that cannot be reset

Created on 7 Dec 2018  路  4Comments  路  Source: twbs/bootstrap

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).

picture Kereas
👍1

All 4 comments

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

XhmikosR picture XhmikosR on 7 Dec 2018

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.

mdo picture mdo on 9 Dec 2018
👎2

@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;
  }
}
dimitor115 picture dimitor115 on 3 Mar 2020
👍1

/CC @twbs/css-review ^^

XhmikosR picture XhmikosR on 3 Mar 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

alvarotrigo picture alvarotrigo  路  3Comments
matsava picture matsava  路  3Comments
devdelimited picture devdelimited  路  3Comments
athimannil picture athimannil  路  3Comments
leomao10 picture leomao10  路  3Comments