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: | 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
kelson
2010-05-04 09:30:06 PDT
I can confirm this bug, it's currently causing me pain trying create a responsive design. Thanks Rob 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. (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. 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 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. 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. I found a solution; if you set the containing table row <tr> to display:table-cell, it will render as expected. 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! 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! |