On 2007-02-21, finecur <fi*****@yahoo.comwrote:
Hi,
Here is my html:
<table>
<tr>
<td colspan=2>Name <input type=text...><input type=button...></td>
</tr>
<tr>
<td>....</td>
<td>....</td>
</tr>
</table>
The width of the second row (and thus the width of the table) is
changing depending on its content. I want, however, in the first row,
"Name" is always left aligned. The button is always right aligned.
And
the text filed fill all the space between them.
I can not figure out how to do it. Can anyone help?
The problem is rather difficult. The table's width depends on the
contents of the second row, but you want the widths of things in the
first row to be a function of that computed width.
I have a solution that works in Opera, FF and Konqueror. It's dodgy
because it involves setting percentage widths of auto-width containers,
which the browser is entitled to ignore.
By using a nested table, we dissociate the three columns in the first
row from the three in the second row.
Setting "Name" and "click" to 1px each is intended to make the browser
shrink them to their content minwidth, leaving everything else in the
middle for the text input.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
td { border: 1px solid green; }
</style>
</head>
<body>
<table>
<tr>
<td colspan="2">
<table style="width: 100%">
<tr>
<td style="width: 1px">Name</td>
<td>
<input type="text" style="width:100%">
</td>
<td style="width: 1px">
<input type="button" value="click">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
content content content content
</td>
<td>
content content
</td>
</tr>
</table>
</body>
</html>