open-props icon indicating copy to clipboard operation
open-props copied to clipboard

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

Open foolip opened this issue 1 year ago • 3 comments

I'm having trouble with this style:

https://github.com/argyleink/open-props/blob/59bb7e5399df56f8b1a666e0d9fb2e5f7521ab30/src/extra/normalize.src.css#L298-L299

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 https://github.com/argyleink/open-props/pull/394.

foolip avatar Mar 28 '24 09:03 foolip

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?

argyleink avatar Mar 28 '24 16:03 argyleink

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.

foolip avatar Mar 28 '24 16:03 foolip

looks like your

table {
  width: 100%;
}

is workin great?

argyleink avatar Mar 28 '24 16:03 argyleink