asked on

TD not shrinkable

Hi,

I need to create a TD not shrinkable with a fixed size of 50 even if the browser is resized.

Which property do I have to apply for this ?

Below my sample.

Thanks,

Phil

<table align="left" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50"></td>
    <td></td>
  </tr>
</table>

Open in new window

me655321

Try this...

<table align="left" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed">

asafadis

Keep in mind that modern browsers zoom web pages, versus the traditional text-resizing (which is still optional in some browsers).
You can define a specific width to a cell, and expect it to remain that size if the text is resized. However, resistance is futile when trying to prevent the resizing of any element when the browser zooms a page.

That said, try:

<table align="left" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="width:50px;">foo</td>
    <td>bar</td>
  </tr>
</table>

Open in new window

nordtorp

It seems to be many experts here, so my tips with just <td width="50%"></td> would maybe be wrong.

a1aait

<td width="50%"></td> = 50% of the width of the table
<td width="50px"></td> = 50 pixels

You could also put in a 50 pixel transparent image, or image same color as background, but as the TD contents, not a CSS background.

Vinay Rajput

<table align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1"><img src="spacer.gif" width="50" height="1" /></td>
<td width="99%"></td>
</tr>
</table>

here spacer.gif is a transparent 1x1px gif image

asafadis

Spacers are the devil.

The use of GIF spacers is an antiquated web design technique used to bend layouts to your will. With the advancements in browsers, CSS, and the strive for a more semantic web, this practice has been been declining (as it should). Nowadays you can do pretty much anything you need to with CSS. No modern web designer should be using this technique, or even encouraging it.

What you are asking to do can be easily accomplished with some basic CSS rules. Two things to keep in mind:

@nordtorp actually had a good point with his humble opinion. I jumped to the conclusion that you meant 50px, which is not the same as 50%. My snippet still holds though.
In the absence of any content, cells might collapse regardless of any fancy-shmancy CSS. In this case, you would fill the space with " " (non-break space). This is the equivalent of a space. It's transparent, harmless, but it's still content, so CSS will respect that.

Think I'm full of it?

Useful resources fore styling tables with CSS:

Hope this helps.

<table align="left" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="width:50px;">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
 
You can also use CSS for the table itself:
 
<table align="left" style="border: none; border-collapse: collapse;">
  <tr>
    <td style="width:50px;">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Open in new window

s2000_com

ASKER

I've finally found the problem but don't know how to resolve it :

I created 2 pages with server process :

1. http://www.unicellar.com/test1.html : this URL contains the DOCTYPE like this <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> : the cell IS shrinkable

2. http://www.unicellar.com/test2.html : this URL doesn't contain any DOCTYPE : the cell IS NOT shrinkable.

Have you a solution using the DOCTYPE ?

Thanks,

Phil

ASKER CERTIFIED SOLUTION

s2000_com

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial