Skip to content

prevents .table-striped to be automatically applied to inner tables#30251

Closed
lucianocosta wants to merge 1 commit intotwbs:masterfrom
lucianocosta:patch-1
Closed

prevents .table-striped to be automatically applied to inner tables#30251
lucianocosta wants to merge 1 commit intotwbs:masterfrom
lucianocosta:patch-1

Conversation

@lucianocosta
Copy link

It seems we had no clean way to remove the striped behaviour from inner tables once it's added to a parent table. Now it's possible to add it manually, if wanted.

It seems we had no clean way to remove the striped behaviour from inner tables once it's added to a parent table. Now it's possible to add it manually, if wanted.
@lucianocosta lucianocosta requested a review from a team as a code owner February 19, 2020 20:09
@MartijnCuppens
Copy link
Member

We should do this with all our table styles for consistency. The docs should be adjusted then too.

@lucianocosta
Copy link
Author

lucianocosta commented Feb 25, 2020

Hi @MartijnCuppens!

It seems to be just an unexpected behaviour for ".table-striped" class, I think there's nothing to change in the docs...

The doc for .table-striped says:

Use .table-striped to add zebra-striping to any table row within the <tbody>.

And this behaviour is currently being added for (inner) tables that I've not added the class ".table-striped"

I'm trying to help by solving one problem at time, without side effects. Please point me what other styles you think we should fix to consistently solve this, I would be pleased to give back to Bootstrap!

@MartijnCuppens
Copy link
Member

I'm trying to help by solving one problem at time, without side effects.

That's how we like it. However, we can't ship a version where the child combinator is only used for the striped tables.

Use .table-striped to add zebra-striping to any table row within the

"Any" means any, not only the direct children.

Don't get me wrong, I really love to see this, but then applied to all table styles to be consistent and with documentation changes + documentation in the migration guide.

@lucianocosta
Copy link
Author

That's how we like it. However, we can't ship a version where the child combinator is only used for the striped tables.

I've started to work on that, but the more I see, the more think that's an issue just for striped tables! I mean, if I set a table to be a table-dark, table-bordered, table-borderless, table-hover or table-sm, it's visually expected that behaviour to be extended for any inner table, and it's easy to change if not. But when we set it to be a striped-table, the inner table's rows get weird because of the tr(odd) selector, wich mixes any table rows inside a striped-table...

Please take a look to this jsFiddle and note that I've changed the inner table class attr on second row (@fat), to be sm and borderless.

Thanks for your attention, and tell me if you think that we should really change it all, then I'll do it!

@lucianocosta
Copy link
Author

lucianocosta commented Feb 26, 2020

In time, just noticed that @mdo changed that in the past

@MartijnCuppens
Copy link
Member

... the more think that's an issue just for striped tables ...

I don't think it it. For example, the hoverable table styles will leak to nested tables.

and tell me if you think that we should really change it all

This issue might need more research and discussion. Could you open a new issue to discus this with some POC codepens (also with nested tables)?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants