Page 1 of 1

width of a cell

Posted: Tue Mar 14, 2006 10:13 am
by mjseaden
Hi,

I'm trying to create an HTML table with first element width 220 pixels, and the next element (or 2) next to it of width to the edge of the browser.

I've tried

Code: Select all

<table><tr><td width="220"></td><td width="100%"></td></tr></table>
but this collapses the with of the first td - what's up with it?

Many thanks

Posted: Tue Mar 14, 2006 10:29 am
by feyd
it's being collapsed because it can, there's no data in it that's keeping it wide.

Posted: Tue Mar 14, 2006 10:32 am
by mjseaden
If i put text into the cell, it still collapses without retaining its witdth - I take it I have to use images to keep it reliably from collapsing? strange that such a basic layout can't be coded in html??

Posted: Tue Mar 14, 2006 10:40 am
by feyd
I never said it couldn't. In fact it can.

Code: Select all

<table width="100%">
  <tr>
    <td width="220"></td>
    <td></td>
    <td></td>
  </tr>
</table>

Posted: Wed Mar 15, 2006 8:55 am
by mjseaden
Yes but it still collapses - it appears that i have to place an image in the table data element of a fixed width in order to keep its width fixed as I collapse my browser window - is that correct?

Posted: Wed Mar 15, 2006 8:59 am
by feyd
if you absolutely want it to be a certain width, you need something to force the width you want.

Posted: Wed Mar 15, 2006 12:04 pm
by dasantillo
I had a similar problem when specifiying table widths in CSS - I then realised I needed to add 'px' after the width. I always thought that was optional, but it made a huge difference.

Try it like this:

Code: Select all

... width="220px" ...
Let me know if this makes a difference.

You could try putting a blank space in each empty cell too:

Code: Select all

<td>&nbsp;</td>


That might help.

KR

Dan.

Posted: Wed Mar 15, 2006 12:11 pm
by matthijs
Pff, I'm soo glad I almost never have to use tables, they sure are difficult to use....

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
table {background:#eee;width:100%;}
table td.left {
width:220px;
background:#ddd;
} 
-->
</style>
</head>
<body>
<table><tr><td class="left">This is the first td</td><td>and this the second</td></tr></table>
</body>
</html>