100% width table cell
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.
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>
<styl开发者_开发问答e 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>
I was not surprised when you said it worked in some browsers and not others. Welcome to the real world of developing a web app. I haven't gone down into the nitty gritty of checking why browsers are refreshing their layouts differently, as i've learned that it can be a black hole of time. Instead i put forth the following solution:
<!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 class="delimiter">
<table><tr>
<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></table>
</td>
</tr>
<tr>
<td><label>Row 2</label></td>
<td> </td>
<td>
<table><tr>
<td><input type="text" id="field2" value="Field 2" size="25" /></td>
<td class="delimiter"> </td>
</tr></table>
</td>
</tr>
</table>
</body>
</html>
I know it's not the prettiest solution, but as raw html it does work. Tested in Chrome and IE10.
Use W3C standards to be more save with crossbrowser coding. Beste solution for javascript code crossbrowser safty is to user jQuery. It's even more handy for this kind of tools/functionalities.
加载中,请稍侯......
精彩评论