38527 2010-05-04 09:30:06 -0700 Cannot override display:table-cell on td or display:table on table. 2022-10-21 18:09:42 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) PC Windows 7 RESOLVED CONFIGURATION CHANGED http://www.hyperborea.org/journal/wp-content/uploads/2010/05/tabletest.html InRadar P2 Normal --- 1 kelson webkit-unassigned ahmad.saleem792 ap bfulgham freemabr+webkit igor.oliveira josh me rniwa rob_waring search2shokrish simon.fraser webkit-bug-importer zalan oldest_to_newest 220629 0 55023 kelson 2010-05-04 09:30:06 -0700 Created attachment 55023 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. 576060 1 rob_waring 2012-03-12 04:20:16 -0700 I can confirm this bug, it's currently causing me pain trying create a responsive design. Thanks Rob 891251 2 freemabr+webkit 2013-05-20 10:47:17 -0700 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. 1068683 3 me 2015-02-12 11:37:23 -0800 (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. 1105679 4 search2shokrish 2015-06-30 07:03:09 -0700 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 1125981 5 josh 2015-09-15 09:21:30 -0700 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. 1126054 6 josh 2015-09-15 11:13:58 -0700 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. 1126070 7 josh 2015-09-15 11:34:00 -0700 I found a solution; if you set the containing table row <tr> to display:table-cell, it will render as expected. 1886375 8 ahmad.saleem792 2022-07-24 10:59:35 -0700 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! 1886469 9 webkit-bug-importer 2022-07-24 21:48:27 -0700 <rdar://problem/97531834> 1907472 10 ahmad.saleem792 2022-10-21 18:09:42 -0700 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! 55023 2010-05-04 09:30:06 -0700 2010-05-04 09:30:06 -0700 Testcase tabletest.html text/html 2559 kelson PGh0bWw+DQo8aGVhZD4NCjx0aXRsZT5UYWJsZSBTdHlsZSBUZXN0PC90aXRsZT4NCjxzdHlsZSB0 eXBlPSJ0ZXh0L2NzcyI+DQp0YWJsZSwgdHIsIHRkIHtib3JkZXI6IDFweCBibGFjayBzb2xpZDsg cGFkZGluZzogMWVtOyBtYXJnaW46IDNweDt9DQoNCnRhYmxlIHtiYWNrZ3JvdW5kOiAjZmNjOyB9 DQp0ciB7YmFja2dyb3VuZDogI2NjZn0NCnRkIHtiYWNrZ3JvdW5kOmdyZWVufQ0KI2Jsb2NrdGFi bGUsICNibG9ja3RhYmxlIHRyLCAjYmxvY2t0YWJsZSB0ZCB7ZGlzcGxheTpibG9ja30NCiNpbmxp bmV0YWJsZSwgI2lubGluZXRhYmxlIHRyLCAjaW5saW5ldGFibGUgdGQge2Rpc3BsYXk6aW5saW5l fQ0KI21peGVkdGFibGUxIHRkIHtkaXNwbGF5OmJsb2NrfQ0KI21peGVkdGFibGUyLCAjbWl4ZWR0 YWJsZTIgdGQge2Rpc3BsYXk6YmxvY2t9DQo8L3N0eWxlPg0KPC9oZWFkPg0KPGJvZHk+DQo8aDE+ VGFibGUgVGVzdDwvaDE+DQoNCjxoMj5Ob3JtYWwgVGFibGU8L2gyPg0KPHRhYmxlIGlkPSJub3Jt YWwiPg0KPHRyPjx0ZD4xPC90ZD48dGQ+MjwvdGQ+DQo8L3RyPg0KPHRyPjx0ZD4zPC90ZD48dGQ+ NDwvdGQ+DQo8L3RyPg0KPC90YWJsZT4NCg0KPHA+Rm91ciBjZWxscyBhcnJhbmdlZCBpbiBhIHNx dWFyZS48L3A+DQoNCjxoMj5VbndyYXBwZWQgVGFibGUgKEJsb2NrKTwvaDI+DQo8dGFibGUgaWQ9 ImJsb2NrdGFibGUiPg0KPHRyPjx0ZD4xPC90ZD48dGQ+MjwvdGQ+DQo8L3RyPg0KPHRyPjx0ZD4z PC90ZD48dGQ+NDwvdGQ+DQo8L3RyPg0KPC90YWJsZT4NCg0KPHA+RXZlcnkgZWxlbWVudCBoZXJl IGhhcyBiZWVuIGNoYW5nZWQgdG8gYSBibG9jaywgc28gd2UgaGF2ZSB0d28gdmVydGljYWwgZ3Jv dXBzIG9mIHR3byBjZWxscyBlYWNoLiBOb3RlIHRoYXQgdGhlIHRhYmxlLCBub3cgdGhhdCBpdCdz IGEgYmxvY2sgZWxlbWVudCwgc2hvdWxkIHRha2UgdXAgdGhlIGVudGlyZSB3aWR0aCBvZiB0aGUg cGFnZS48L3A+DQoNCjxwPldvcmtzIGluIEZpcmVmb3ggMy42LCBPcGVyYSAxMC41LiAgSWdub3Jl ZCBpbiBJbnRlcm5ldCBFeHBsb3JlciA4LjwvcD4NCjxwPkJyb2tlbiBpbiBTYWZhcmkgNCwgQ2hy b21lIDQ6IFRoZSByb3dzIGhhdmUgYmVlbiBjb252ZXJ0ZWQgdG8gYmxvY2tzLCBtYWtpbmcgdGhl bSB2aXNpYmxlLCBidXQgdGhlIGNlbGxzIHJlbWFpbiBhcyB0YWJsZSBjZWxscy48L3A+DQoNCjxo Mj5VbndyYXBwZWQgVGFibGUgKElubGluZSk8L2gyPg0KPHRhYmxlIGlkPSJJbmxpbmV0YWJsZSI+ DQo8dHI+PHRkPjE8L3RkPjx0ZD4yPC90ZD4NCjwvdHI+DQo8dHI+PHRkPjM8L3RkPjx0ZD40PC90 ZD4NCjwvdHI+DQo8L3RhYmxlPg0KDQo8cD5FdmVyeSBlbGVtZW50IGhlcmUgaGFzIGJlZW4gY2hh bmdlZCB0byBkaXNwbGF5OmlubGluZS4gV2UgaGF2ZSB0d28gaG9yaXpvbmF0YWwgZ3JvdXBzIG9m IHR3byBjZWxscyBlYWNoLCBhbmQgdGhlIHN1cnJvdW5kaW5nIGVsZW1lbnQgKHRoZSBvcmlnaW5h bCB0YWJsZSkgaXMgb25seSBhcyB3aWRlIGFzIGl0IG5lZWRzIHRvIGJlIHRvIGhvbGQgaXRzIGNv bnRlbnQuPC9wPg0KDQo8cD5Xb3JrcyBpbiBGaXJlZm94IDMuNiwgT3BlcmEgMTAuNS4gIElnbm9y ZWQgaW4gSW50ZXJuZXQgRXhwbG9yZXIgOC48L3A+DQo8cD5Ccm9rZW4gaW4gU2FmYXJpIDQsIENo cm9tZSA0OiBUaGUgcm93cyBoYXZlIGJlZW4gY29udmVydGVkIHRvIGlubGluZSwgYnV0IHRoZSBj ZWxscyBpbnNpZGUgdGhlbSBhcmUgc3RpbGwgdGFibGUgY2VsbHMsIGxlYWRpbmcgdG8gYSByZWFs bHkgd2VpcmQgYXBwZWFyYW5jZS48L3A+DQoNCg0KDQoNCjxoMj5NaXhlZCBUYWJsZSAoQ2VsbHMg T25seSk8L2gyPg0KPHRhYmxlIGlkPSJNaXhlZHRhYmxlMSI+DQo8dHI+PHRkPjE8L3RkPjx0ZD4y PC90ZD4NCjwvdHI+DQo8dHI+PHRkPjM8L3RkPjx0ZD40PC90ZD4NCjwvdHI+DQo8L3RhYmxlPg0K DQo8cD5BcyBhIHdvcmthcm91bmQgdG8gdGhlIFdlYmtpdCBidWcgZGlzcGxheWVkIGFib3ZlLCBv bmx5IGNoYW5nZSB0aGUgZGlzcGxheSBzdHlsZSBvbiB0aGUgdGFibGUgY2VsbHMgdGhlbXNlbHZl cy4gIFdlYmtpdCB3aWxsIGlnbm9yZSBpdCBhbmQgbGVhdmUgdGhpbmdzIGFzIHRoZXkgd2VyZS4g RmlyZWZveCBhbmQgT3BlcmEgd2lsbCBzdGlsbCBhcnJhbmdlIHRoZSBjZWxscyBpbiBibG9ja3Mu DQoNCjxoMj5NaXhlZCBUYWJsZSAoQ2VsbHMgYW5kIFRhYmxlKTwvaDI+DQo8dGFibGUgaWQ9Ik1p eGVkdGFibGUyIj4NCjx0cj48dGQ+MTwvdGQ+PHRkPjI8L3RkPg0KPC90cj4NCjx0cj48dGQ+Mzwv dGQ+PHRkPjQ8L3RkPg0KPC90cj4NCjwvdGFibGU+DQoNCjxwPkFzIGEgd29ya2Fyb3VuZCB0byB0 aGUgV2Via2l0IGJ1ZyBkaXNwbGF5ZWQgYWJvdmUsIGNoYW5nZSB0aGUgdGFibGUgYW5kIHRhYmxl IGNlbGxzLCBidXQgbm90IHRoZSB0YWJsZSByb3dzLiAgV2Via2l0IHdpbGwgaWdub3JlIGl0IGFu ZCBsZWF2ZSB0aGluZ3MgYXMgdGhleSB3ZXJlLiBGaXJlZm94IGFuZCBPcGVyYSB3aWxsIHN0aWxs IGFycmFuZ2UgdGhlIGNlbGxzIGluIGJsb2Nrcy4NCg0KDQoNCjwvYm9keT48L2h0bWw+