Hello!
I have this table layout. I want to align the whole content to the right. So i'm using one
cell with width: 100%;. Usually everything looks good and nice.
But there is something, which i don't understand. If the content in
cell, which has colspan, becomes bigger than normal
cell in this column (you can test this by clicking Click to test button), it brakes whole layout.
This happens on Chrome, Safari 4 and 5, IE8, but on Opera, FF and IE7 is OK.
Any ideas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<style type="text/css">
table { width: 100%; }
table td { border: 1px solid black; white-space: nowrap; }
.delimiter { width: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td><label>Row 1</label></td>
<td> </td>
<td><input type="text" value="Field 1" id="field1" size="25"></td>
<td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;"></td>
<td class="delimiter"> </td>
</tr>
<tr>
<td><label>Row 2</label></td>
<td> </td>
<td colspan="3"><input type="text" id="field2" value="Field 2" size="25"></td>
</tr>
</table>
</body>
</html>
