argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.

Home Page:https://open-props.style

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

foolip opened this issue · comments

I'm having trouble with this style:

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

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?

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.

looks like your

table {
  width: 100%;
}

is workin great?