Bug 38527

Summary: Cannot override display:table-cell on td or display:table on table.
Product: WebKit Reporter: kelson
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, freemabr+webkit, igor.oliveira, josh, me, rniwa, rob_waring, search2shokrish, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: PC   
OS: Windows 7   
URL: http://www.hyperborea.org/journal/wp-content/uploads/2010/05/tabletest.html
Attachments:
Description Flags
Testcase none

Description kelson 2010-05-04 09:30:06 PDT
Created attachment 55023 [details]
Testcase

Using CSS to override the display property on td or table does not work, but overriding the property on tr does. This can lead to strange results if a page wants to unwrap a table by making them all display:block, or display:inline.

On td elements, the developer tools show display:table-cell crossed out in the user-agent stylesheet, and display:block in the inline or attached stylesheet as active, but the computed style shows display:table-cell.   

The same applies for table elements and display:table, or for trying to override either with display:inline instead.  In all cases the default values are shown crossed out, and the overridden values are shown active, but the computer style is back to the default.

On tr, however, overriding display *does* work as expected. The default display:table-row is crossed out, and the display:block from the inline stylesheet is shown as active...but the computed style and actual layout *do* reflect display:block.

This can make for some unexpected behavior if a page tries to unwrap a table (for small-screen display, for instance), as the table rows will stop behaving as rows, but the cells will continue to behave as table cells.

Found in Chrome 4 and Safari 4, and confirmed in the WebKit r58686 nightly. Firefox 3.6 and Opera 10.5 successfully override the values, while Internet Explorer 8 does not change any of them.
Comment 1 Rob Waring 2012-03-12 04:20:16 PDT
I can confirm this bug, it's currently causing me pain trying create a responsive design.

Thanks

Rob
Comment 2 Brandon Freeman 2013-05-20 10:47:17 PDT
I want to add to this bug, not because it really is a bug, but I don't think what it is doing is quite complete.  It looks like webkit won't override the display properties because a doctype isn't declared.  So, you would need <!DOCTYPE html> at the top of your document.  Now, this is all fine and dandy, but it seems to only enforce this on td, and not th or any other part of the table.  This seems silly.
Comment 3 Joey Hoer 2015-02-12 11:37:23 PST
(In reply to comment #2)
> I want to add to this bug, not because it really is a bug, but I don't think
> what it is doing is quite complete.  It looks like webkit won't override the
> display properties because a doctype isn't declared.  So, you would need
> <!DOCTYPE html> at the top of your document.  Now, this is all fine and
> dandy, but it seems to only enforce this on td, and not th or any other part
> of the table.  This seems silly.

This resolved the issue for me, but I agree that this should be considered a bug, and should be fixed.
Comment 4 vuntie 2015-06-30 07:03:09 PDT
Hi All,
I have this same problem for responsive design. I do have <!DOCTYPE html> on my webpage but still doesn't work. However, if i append my css code internally instead of external css,  it works or override the inline css. I really don't understand why it doesn't work when i keep same css code in external css though. 

Thanks
Comment 5 WebDevJoshB 2015-09-15 09:21:30 PDT
This is still a bug in responsive design. It wasn't an issue for me until the last Chrome update 45.0.2454.85. I do have a doctype declared, and the problem still exists.

For mobile, I have my code and CSS to display a table's table-cells as intended on mobile landscape view (media query: less than 599px wide), but for mobile portrait (media query: less than 480px), table cells are set to display:block and width:100%.

Initially when the page loads, everything works, but if you switch from portrait to landscape back to portrait, or if you're in a web browser and keep resizing your screen at those responsive breakpoints, the portrait tables will appear as a hybrid of display:table-cell and display:block. I have no other CSS overriding the section, and when using Dev Tools to check the styles, the useragent overrides the display setting to table-cell.

I created a codepen for this: http://codepen.io/WebDevJoshB/pen/JYGBvB

Be sure to resize the browser a few times at those break points mentioned above.
Comment 6 WebDevJoshB 2015-09-15 11:13:58 PDT
sorry, can't see how to update. This only happens when there are more than two table cells. On two, things are fine. When I increase to 3 or greater, that's when the issue appears.
Comment 7 WebDevJoshB 2015-09-15 11:34:00 PDT
I found a solution; if you set the containing table row <tr> to display:table-cell, it will render as expected.
Comment 8 Ahmad Saleem 2022-07-24 10:59:35 PDT
I am able to reproduce this bug in Safari 15.6 on macOS 12.6 using attached test case, Safari is broken in following cases:

Unwrapped Table (Block)

Unwrapped Table (Inline)

Mixed Table (Cells Only)

Mixed Table (Cells and Table)

Chrome Canary 106 and Firefox Nightly 104 matches with each other. Just wanted to share updated status. If it is duplicate of any other bug, please mark it as so. Thanks!
Comment 9 Radar WebKit Bug Importer 2022-07-24 21:48:27 PDT
<rdar://problem/97531834>
Comment 10 Ahmad Saleem 2022-10-21 18:09:42 PDT
I think it was a quirk which I removed since now Safari Technology Preview 156 matches with Chrome Canary 109 and Firefox Nightly 108.

Marking this as "RESOLVED CONFIGURATION CHANGED". Thanks!