Bug 38527

Summary:

Cannot override display:table-cell on td or display:table on table.

Product:

WebKit

Reporter:

kelson

Component:

CSS

Assignee:

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:

Keywords:

InRadar

Version:

528+ (Nightly build)

Hardware:

OS:

Windows 7

URL:

http://www.hyperborea.org/journal/wp-content/uploads/2010/05/tabletest.html

Attachments:

Description	Flags
Testcase	none

kelson

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

Attachments
Testcase (2.50 KB, text/html) 2010-05-04 09:30 PDT, kelson	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Rob Waring

Comment 1 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

Brandon Freeman

Comment 2 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.

Joey Hoer

Comment 3 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.

vuntie

Comment 4 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

WebDevJoshB

Comment 5 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.

WebDevJoshB

Comment 6 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.

WebDevJoshB

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

Ahmad Saleem

Comment 8 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!

Radar WebKit Bug Importer

Comment 9 2022-07-24 21:48:27 PDT

<rdar://problem/97531834>

Ahmad Saleem

Comment 10 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!

Note You need to log in before you can comment on or make changes to this bug.