Back To Website Design Forum

Maximum Width for a Table

  • CazpianXI
  • Proficient
  • Proficient
  • User avatar
  • Joined: Dec 22, 2003
  • Posts: 285
  • Status: Offline

Post March 17th, 2004, 7:50 am

I'm trying to make a webpage that will allow the user to expand or shrink his window, and the content of the page will expand or shrink to fit the window. BUT I have a problem: If the user has a very large monitor, the lines of text on the page will be very long and not very pleasant to read.

Is there any way that I can specity a maximum width to the table that the text is inside of? I mean, is there any way that I can make the table expand to 100% of the width of the user's browser, but not exceed x pixels?

To wit, something like this:

Code: [ Select ]
<table width="100%" maxwidth="600">
...
</table>
  1. <table width="100%" maxwidth="600">
  2. ...
  3. </table>


I know that the "maxwidth" is invalid HTML, but is there any way that I can do that using HTML, JavaScript, or CSS?

Thanks.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 17th, 2004, 7:50 am

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post March 17th, 2004, 7:57 am

max-width is valid CSS2 but only supported in NS7, Opera 7 and probably Mozilla. I don't believe it's supported in IE 6
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post March 17th, 2004, 10:59 pm

Maybe a 50% width div for text nested inside your 100% width table ?
At 1280 X 1024 this would give you a 640px text div , while at 800 X 600 give you a 400px text div.

Of course this is assuming that your 100% width table is 100% of the screen. :wink:
Strong with this one, the sudo is.
  • CazpianXI
  • Proficient
  • Proficient
  • User avatar
  • Joined: Dec 22, 2003
  • Posts: 285
  • Status: Offline

Post March 18th, 2004, 8:46 am

I created a simple JavaScript that might do the job:

Code: [ Select ]
<img src="images/1px.gif" height="0" width="100%" name="thepic" />
<div id="maindiv" width="100%">
  1. <img src="images/1px.gif" height="0" width="100%" name="thepic" />
  2. <div id="maindiv" width="100%">

...
Code: [ Select ]
</div>
<script language="javascript">
function resize_max() {
   if(window.innerWidth) {
      browser_width = window.innerWidth;
   }
   else if(document.thepic.width) {
      browser_width = document.thepic.width;
   }
   else {
      browser_width = screen.width;
   }

   if(browser_width>1000) {
      xresizeby = 1000 - browser_width;
      document.getElementById("maindiv").style.width = 1000;
   }
}

resize_max();
window.onresize = resize_max;
</script>
  1. </div>
  2. <script language="javascript">
  3. function resize_max() {
  4.    if(window.innerWidth) {
  5.       browser_width = window.innerWidth;
  6.    }
  7.    else if(document.thepic.width) {
  8.       browser_width = document.thepic.width;
  9.    }
  10.    else {
  11.       browser_width = screen.width;
  12.    }
  14.    if(browser_width>1000) {
  15.       xresizeby = 1000 - browser_width;
  16.       document.getElementById("maindiv").style.width = 1000;
  17.    }
  18. }
  20. resize_max();
  21. window.onresize = resize_max;
  22. </script>


I've tested this in IE, Mozilla, and Netscape and it seems to work fine.

I had a tough time since IE dosen't seem to support telling me the dimensions of the user's browser, so i made a workaround: make an image whose width is 100% and IE will return the value of the width the image (which should be the width of the user's browser)

My question is: Is this valid HTML? Will some browsers reject setting the width of an image to 100%

Thanks.
  • CazpianXI
  • Proficient
  • Proficient
  • User avatar
  • Joined: Dec 22, 2003
  • Posts: 285
  • Status: Offline

Post March 18th, 2004, 8:51 am

I created a simple JavaScript that might do the job:

Code: [ Select ]
<img src="images/1px.gif" height="0" width="100%" name="thepic" />
<div id="maindiv" width="100%">
  1. <img src="images/1px.gif" height="0" width="100%" name="thepic" />
  2. <div id="maindiv" width="100%">

...
Code: [ Select ]
</div>
<script language="javascript">
function resize_max() {
   if(window.innerWidth) {
      browser_width = window.innerWidth;
   }
   else if(document.thepic.width) {
      browser_width = document.thepic.width;
   }
   else {
      browser_width = screen.width;
   }

   if(browser_width>1000) {
      xresizeby = 1000 - browser_width;
      document.getElementById("maindiv").style.width = 1000;
   }
}

resize_max();
window.onresize = resize_max;
</script>
  1. </div>
  2. <script language="javascript">
  3. function resize_max() {
  4.    if(window.innerWidth) {
  5.       browser_width = window.innerWidth;
  6.    }
  7.    else if(document.thepic.width) {
  8.       browser_width = document.thepic.width;
  9.    }
  10.    else {
  11.       browser_width = screen.width;
  12.    }
  14.    if(browser_width>1000) {
  15.       xresizeby = 1000 - browser_width;
  16.       document.getElementById("maindiv").style.width = 1000;
  17.    }
  18. }
  20. resize_max();
  21. window.onresize = resize_max;
  22. </script>


I've tested this in IE, Mozilla, and Netscape and it seems to work fine.

I had a tough time since IE dosen't seem to support telling me the dimensions of the user's browser, so i made a workaround: make an image whose width is 100% and IE will return the value of the width the image (which should be the width of the user's browser)

My question is: Is this valid HTML? Will some browsers reject setting the width of an image to 100%

Thanks.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post March 18th, 2004, 9:22 am

Give the image an alt, and make sure the div width is defined in css instead of the div it self and it should validate. As for some browsers rejecting it I'm not sure.
Strong with this one, the sudo is.

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 129 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.