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>
