Trouble Mixing Relative and Absolute Widths 1

[BoulderBum]

I have a structure something similar to:

<table style="width: 100%">
  <tr>
     <td style="width: 10px">blah</td>
     <td>blah</td>
  </tr>
</table>

The problem is that it seems to ignore my 10px constraint on the child element (it adopts a sort of relative size). Does anyone know why, and how to work around it?

 

[Vragabond]

What is the child element? I see no child element within the 10px constraint.

The way tables behave is that they expand to fit the content. Since it is highly unlikely that the word blah takes less than 10px of space, the column needs to be extended. If you want to avoid that, you can use overflow: hidden; on the td and it should just crop anything that hangs over.

 

[BoulderBum]

Oops, I'm not a designer, I'm a developer so I think of elements in XML terms where td is a child of tr. I don't know the proper DOM lingo.

Anyway, the funny thing is that the element in the real example actually just contains   (or is empty), but it still retained about 20-30 pixels worth of space.

Thanks much on the overflow: hidden tip, though. I didn't know about it and will play with it (even though I worry it may not take care of the issue at hand because the text itself takes up so little space)!

 

[Vragabond]

The other tip for keeping tables in the dimensions you want them is to use [tt]table-layout: fixed;[/tt] in the table tag style.

 

[Tarwn]

Additionally you may want to set the cellpadding and cellspacing attributes in the table tag to 0, as these have default values that add more space inside and outside the cells (in that order).

-T

 

[ChrisHunt]

Why do you want a 10px-wide empty cell anyway?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[BoulderBum]

Thanks, Tarwn. I did do that, fortunately.

Chris:

The cell was to serve as an element you can click and drag to resize a navigation panel so I can simulate a frames setup without actually using frames (which we don't want to do for a variety of reasons).

 

[Tarwn]

Heh, sorry man, I didn't notice it was you asking the question when I posted earlier, now I feel a little silly

Hmm, first time I have used the table-layout attribute.

 

[BoulderBum]

Nah, thanks for the help, man! Honestly, I'm pretty bad with all this visual layout stuff. I'm a lot more comfortable with the code behind it!