[webkit-help] Table rendering issue: 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?

Mikael mikael.trash at gmail.com
Tue Jul 20 07:56:40 PDT 2010


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,
Mikael
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-help/attachments/20100720/943bc678/attachment.html>


More information about the webkit-help mailing list