I have a table where one of the left column shrinks when I set the nested element's style to width:80%. The column shrinks and truncates the input elements right edge. You can see what I'm talking about by removing the style from the input element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<table width="100%" border="1">
<tr>
<td>
<input type="text" style="width: 80%;" />
</td>
<td>
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
Lots of text to make the right cell expand.
</td>
</tr>
</table>
</body>
</html>
I've got a feeling it's because the columns are sized based on children, but by sizing the element based on it's parent, I've created a 'catch 22'.
Can somebody please enlighten me as to what is going on, and how I might maintain the same column width, and size my element to 80% of it's width?
Thanks in advance.
-
The problem that you are having is because you are setting the
<input>'s width to be a percentage of a cell that has no width. So the cell is becoming smaller to make up for the text on the other cell and once that's done the input is getting 80% of whatever is left.Your options:
1) Set a width in pixels for the<input>field.
2) Set a width in pixels/percentage for the<td>.addressing your comment: When you remove the style, the reason it is getting larger is because it is going back to the browser's default size for
<input>elements, which is bigger than 80% of whatever's left in the cell.John MacIntyre : And when I remove the style, the input is sizing first? So my catch 22 idea is accurate?eduffy : This works if type="text", but not if type="file". Any idea what the problem here is?Paolo Bergantino : What happens with type="file"?eduffy : It's just the default size, it doesn't fill up the td.Paolo Bergantino : Well, type="file" inputs are notoriously difficult to mess around with as depending on the browser and operating system they pretty much do whatever the heck they want with it. If you post a question with more details I might be able to help but for the most part you're out of luck unless you want to use a flash interface or something. -
You could give an explicit width to the first column:
<table width="100%" border="1"> <tr> <td width="20%"> <input type="text" style="width: 80%;" /> </td>
0 comments:
Post a Comment