Maximum Width for a Table

  • CazpianXI
  • Proficient
  • Proficient
  • User avatar
  • Posts: 285

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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:
  • CazpianXI
  • Proficient
  • Proficient
  • User avatar
  • Posts: 285

Post 3+ Months Ago

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.    }
  13.    if(browser_width>1000) {
  14.       xresizeby = 1000 - browser_width;
  15.       document.getElementById("maindiv").style.width = 1000;
  16.    }
  17. }
  18. resize_max();
  19. window.onresize = resize_max;
  20. </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
  • Posts: 285

Post 3+ Months Ago

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.    }
  13.    if(browser_width>1000) {
  14.       xresizeby = 1000 - browser_width;
  15.       document.getElementById("maindiv").style.width = 1000;
  16.    }
  17. }
  18. resize_max();
  19. window.onresize = resize_max;
  20. </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
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 29 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.