Table width...... 4

[skosterow]

Im needing to set a table at a certain size:

<table width="100%">
Table Data here
</table>

However, I dont want the table to go over say 600 px. Is there a way to do that with either HTML or DHTML?

Thanks in advance!

- Scott

 

[Vragabond]

In CSS2, you have the property just for that: it is called max-width. Good thing is that it does just what you want and the bad thing is that IE does not support it. But you can fake that effect in IE:

<style type="text/css">
 .MyTable {
	width: 100%;
	max-width: 600px;
	width: expression(document.body.clientWidth > 600? "600px": "100%" );
 }
</style>

<table border="1" class="MyTable">
  <tr>
    <td>Table</td>
  </tr>
</table>

I've left the border so you can easily see the difference. The width is defined as 100%. Mozilla and Opera will pick up on that. The table won't extend beyond 600px in Mozilla and Opera, because of the max-width property. IE however will accept the third line, second width declaration, which contains an expression saying: If the browser is larger than 600px, use 600px and if not, use entire screen. It works for me in Mozilla 1.5, Opera 7 and IE6.

 

[tviman]

The width attribute is determined by the available screen width. Unless the layout of the page and the content of the table exceeds the 600px width, the table will never exceed the 100% limit. Is there a specific reason for the table being held to a maximum width of 600px?

There's always a better way. The fun is trying to find it!

 

[BillyRayPreachersSon]

Nice tip about using "expression", Vragabond - I didn't know about that one!

Dan

 

[vongrunt]

Just for the record, there is a nice article about dynamic properties on MSDN:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/recalc.asp

 

[BillyRayPreachersSon]

Excellent - thanks for that!

Dan

 

[skosterow]

Vragabond,

Thanks man sorry it took so long to get back here to post - been busy scripting my little heart out hehehehe!

It works GREAT by the way!

Your the man!

Also to answer tviman's question. The reason I need this is because of the way that the page lays out. I'm trying to stay consitant throughout the site. but allow for different screen sizes that peps may use. Forexample, im building the site aroung 1280 x 1024 (because I know that most of the users using the site will have atleast this setting) however I also know that I have alot of users that use 1600 x 1200. While the page looks great and will expand to a 1600 x 1200 setting thye tables within look like crapola -)). So to stop that I had 2 choices, either A grab the screen size with Perl each time the user hits the page, or B what Vragabond suggested.

Thanks again guys and gals!

- Scott

 

[kurgbe]

Thanks for the tip. Tested under Mozilla 1.7 and IE 6. Works fine.

My question: why is it necesaary to set "width: 100%" in the style definition?

Without it , Mozilla seems to discard the max-width property and set the table width to 100% !!! This behaviour is different with a paragraph. E.g.:

<p style="max-width: 600px;"> ezzekzefkl </p>

works fine: the paragraph is limited to 600 px without the need to set the width: 100%

Any explanation?

thanks.

 

[Vragabond]

It should not disregard the max width when you specify width. I specified it becuase it was a table and table by default has an auto width (as wide as the elements inside) and by putting width: 100%; I expanded it to max-width property. <p> element however has an implied width of 100% so you are right in not needing to set the width property.

 

[zawedx]

I want to know that is it possible to fix a cell width. I tried to set the cell width to a fixed px. But if the information (e.g. a single word like aaaaaaaaaaaaaaaaaaaaaaaaa) exceed that px, the cell expand automatically. Is it possible to made that information fit the fixed px cell without truncating the information?

 

[zawedx]

I want to know that is it possible to fix a cell width. I tried to set the cell width to a fixed px. But if the information (e.g. a single word like aaaaaaaaaaaaaaaaaaaaaaaaa) exceed that px, the cell expand automatically. Is it possible to made that information fit the fixed px cell without truncating the information?

 

[tviman]

AFAIK, that's the nature of tables.

There's always a better way. The fun is trying to find it!