NEW 45111
Rendering bug (ie & firefox does this well but webkit not). Two-column layout table with first column nowrap and second column of width 100% breaks, if there's a row with a column with colspan=2 in it with a wide table in it. How fix? 
https://bugs.webkit.org/show_bug.cgi?id=45111
Summary Rendering bug (ie & firefox does this well but webkit not). Two-column layout...
mikael.trash
Reported 2010-09-02 08:49:08 PDT
(The below is a copy of an email i sent to the webkit-help ml. I realize i'd better post it here.) The reason I posted it is because it reflects what I understand to be an aspect of Webkit's table renderer, that makes it impossible to make two-column layouts with inlined sections with a one-column layout. And what's more peculiar to it, is that the way the renderer makes this impossible, is peculiar. Inlining real basic sections with a one-column layout works, but as soon as the section contains a table, the outer two-column layout's column widths mess up. It seems to me that HTML/Webkit "should" be able to do this. It works in IE and Firefox. What do you say? - The break is manifested as that the two-column layout gets a 50/50 width division instead of the one desired. This is the second time in some while I run into this problem, and I found no solution as of yet, even after an extensive search for a solution. The point with not splitting the outer table in two, is to get the same column width on the two-column layout both below and after the colspan=2. The point with a two-column layout where the first column has nowrap and the second one width 100%, is to present form fields and alike in a consistent manner. I can't use PX or EM widths on the left column, as different browsers give different width to that column based on the width of the text. The reason not to use DIV:s do describe these tables is because i need IE6&7 support and would want to use the same HTML and CSS for both browsers. Do you see any way of getting this running in webkit? The HTML below provides an example, you'll find it currently at http://www.webdevout.net/test?015 . It works well in Firefox 3.6 and IE7 but not in Chromium nor Safari: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-5"><style> .outerTable tr td { border: 1px solid red; } .innerTable tr td { border: 1px solid green; } </style></head> <body> <table class="outerTable"> <tbody> <tr><td>hhhhh</td><td style="width: 100%;">ggggggg</td></tr> <tr><td colspan="2"><table class="innerTable"> <tbody> <tr><td>9</td><td>cccccccccc</td><td>dddddddddd</td><td>aaaaaaaaaaaaa</td><td>bbbbbbbbb</td></tr></tbody></table></td></tr> <tr><td>fffffff</td><td><span class="panelVisible">eeeee</span></td></tr> </tbody></table></body></html> Many thanks
Attachments
Safari 15.6 differs from other browsers (536.55 KB, image/png)
2022-07-27 13:11 PDT, Ahmad Saleem 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Ahmad Saleem
Comment 1 2022-07-27 13:11:23 PDT
Created attachment 461257 [details] Safari 15.6 differs from other browsers I am able to reproduce this by turning the test case from Comment 0 into JSFiddle using Safari 15.6 on macOS 12.5: Link - https://jsfiddle.net/zqt68g59/show Further, I am pretty sure this might be duplicate of some other bug - which I tested in past few months but I can't recall the bug number now. So I think this can be marked as "DUPLICATE" but just want to update latest results. Thanks!
Radar WebKit Bug Importer
Comment 2 2022-07-27 17:55:19 PDT
<rdar://problem/97694085>
Note You need to log in before you can comment on or make changes to this bug.