[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 306
  • Last Modified:

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

0
s2000_com
Asked:
s2000_com
1 Solution
 
me655321Commented:
Try this...

<table align="left" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed">
0
 
asafadisCommented:
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

0
 
nordtorpCommented:
It seems to be many experts here, so my tips with just <td width="50%"></td> would maybe be wrong.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
a1aaitCommented:
<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.
0
 
vinkrinsCommented:
<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
0
 
asafadisCommented:
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 "&nbsp;" (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

0
 
s2000_comAuthor Commented:
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
0
 
s2000_comAuthor Commented:
By googling i found another smart way using CSS :

<table align="left" border="0" cellspacing="0" cellpadding="0" style="padding-left:50px">

0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now