width: fit-content for tables is hard to override or customize

[foolip]

I'm having trouble with this style:

open-props/src/extra/normalize.src.css

Lines 298 to 299 in 59bb7e5

	:where(table) {
	width: fit-content;

It makes my table much narrower than without this style, and I can't figure out how to override it to get the default table layout. What's the right way to effectively cancel this rule? I've tried table { width: initial !important } but no luck.

This changed in #394.

[argyleink]

yo!

no !important required to override a :where() selectors, you should be able to just set a new width value for your table and it's g2g 👍🏻 the clue that the change doesnt feel like it's taking effect, may mean the sizing issue is elsewhere.

you may also want to overwrite the max width on td, if you're looking to have a wider table:

table {
  width: auto;
}

td {
  max-inline-size: auto;
}

Maybe your table is in a grid or flexbox container and *-content is used and effecting the inline sizing of your table too?

[foolip]

Thanks for the pointers, I'll have to revert https://foolip.github.io/spec-reactions/ to before I hacked around the problem and see if your suggestions work.

[argyleink]

looks like your

table {
  width: 100%;
}

is workin great?