[Table] Table Width Render Different Under Chrome 90 And Chrome 91

Skip to content Dismiss alert {{ message }} ant-design / ant-design Public

• Notifications You must be signed in to change notification settings
• Fork 50.4k
• Star 92.9k

• Code
• Issues 1.2k
• Pull requests 85
• Discussions
• Actions
• Projects 3
• Wiki
• Security
• Insights

Additional navigation options

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom [Table] Table width render different under Chrome 90 and Chrome 91 #30755 Closed 1 task done chiaweilee opened this issue May 28, 2021 · 11 comments Closed 1 task done [Table] Table width render different under Chrome 90 and Chrome 91 #30755 chiaweilee opened this issue May 28, 2021 · 11 comments

Comments

Copy link Contributor

chiaweilee commented May 28, 2021 • edited Loading

I have searched the issues of this repository and believe that this is not a duplicate. Reproduction link Steps to reproduce Set wrapper div attribute max-width and overflow: hidden Set columns width Visit under Chrome 90 Visit under Chorme 91 What is expected? Same result What is actually happening? Chrome 90 Chrome 91 Environment Info antd 4.16.0 React latest System Mac OS Browser Chrome 90/91

👍 5 jinmmd, fanpaa, sefide, ystarlongzi, and michaelKaefer reacted with thumbs up emoji All reactions

• 👍 5 reactions

Copy link

flute commented May 28, 2021

+1

All reactions Copy link

HarveyZgit commented May 28, 2021 • edited Loading

+1 Chrome 90 😀 Chrome 91 😰

All reactions Copy link

jinmmd commented May 30, 2021

I guess it's because chrome 91: supports min-width. before 91 version, colgroup min-width is not effect, I suggest you can set a shorter col width.

All reactions Copy link Contributor

itibbers commented May 30, 2021

+1, this global css may temporarily solve the problem. colgroup { display: table-column; }

All reactions Copy link

hunter2009 commented May 30, 2021

More detail in this issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1214190&q=table%20width&can=2 This is what standards had to say: Originally, in CSS2 standard, 'min-width' for COL elements was explicitly undefined in CSS2 standard. "In CSS 2, the effect of min-width and max-width on tables, inline tables, table cells, table columns, and column groups is > undefined." https://drafts.csswg.org/css2/#propdef-min-width Later, in CSS Box Sizing v3, 'min-width' was defined for all elements. "Applies to: all elements that accept width or height" https://drafts.csswg.org/css-sizing-3/#min-size-properties

👍 1 ystarlongzi reacted with thumbs up emoji All reactions

• 👍 1 reaction

Copy link

atotic commented May 30, 2021

I am the Chrome developer that implemented the new tables. This is the problem I saw reported: <Table columns={ [ {... width: 200 } ] } generates following CSS: <col style="width: 200px; min-width: 200px;"> The problem is min-width CSS property. Before Chrome 91, min-width was ignored on COL elements. 91 no longer ignores it. Is there a reason why framework is generating both width and min-width CSS properties? Can you fix it so it only generates width? Until this is fixed, this global CSS will force Chrome 91 to ignore min-width on table columns: colgroup { min-width: auto !important;} col { min-width: auto !important; } I think the fix suggested above is incorrect. It makes COLGROUP behave as if it was a COL colgroup { display: table-column; }

👍 18 lovewxz, jinmmd, chiaweilee, flute, fanpaa, hunter2009, afc163, zombieJ, xc1427, yigexiaoairen, and 8 more reacted with thumbs up emoji All reactions

• 👍 18 reactions

Copy link Member

zombieJ commented May 31, 2021

Let me check if we could remove min-width.

All reactions zombieJ mentioned this issue May 31, 2021 fix: rm useless min-width react-component/table#626 Merged Copy link Member

zombieJ commented May 31, 2021 • edited Loading

Seems min-width is design to force column get at least configured width. But this code never work as expect, let's remove it first.

👍 3 jinmmd, HarveyZgit, and ystarlongzi reacted with thumbs up emoji All reactions

• 👍 3 reactions

zombieJ closed this as completed May 31, 2021 Copy link Member

zombieJ commented May 31, 2021

+ rc-table@7.15.2

👍 1 chiaweilee reacted with thumbs up emoji All reactions

• 👍 1 reaction

Copy link

smithyj commented Jun 1, 2021

这个Bug是我反馈给Chrome的😂

❤️ 4 afc163, mqliutie, zombieJ, and TechQuery reacted with heart emoji All reactions

• ❤️ 4 reactions

Copy link

vclau-1996 commented Jun 10, 2021

+1

All reactions BoyYangzai mentioned this issue Jun 9, 2023 Table does not respect column width on limiting container width after upgrading from 4.10.0 to 4.18.0 #42931 Closed Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment Assignees No one assigned Labels None yet Projects None yet Milestone No milestone Development

No branches or pull requests

10 participants You can’t perform that action at this time.