Setting a maximum width for a table

So that a liquid page has a limit for large screen resolutions

[limbo]

Hello

I am looking for a solution to the liquid vs static pages design for users who use large resolutions. My site displays well on all resolutions until I test on higher res of 1280x1024 and 1600x1280 - here the text strings itself out along the page and becomes less legible.

I don't want to fix the page because of the clarity and useablity on the common browser window,so...

I am hoping there might be a tag or attribute I can add to the table to stop the 'stretch' past about a width of 1000/1300 pixels. I have a feeling I might be trying to acheive the impossible with HTML, but using CSS?

Any input would be appreciated.

Ta

[dmorison]

You are pretty much attempting the impossible there as it would go against all HTML design principles to do what you want. Not saying it can't be done in CSS but you'll be lucky.

I personally wouldn't loose sleep over it; those using stupid big resolutions (ok, it's not stupid if you're doing CAD or something!) will be used to the problems of trying to surf a website with their browser full screen, and I doubt that they ever do it.

They will most likely have their browser sized to a reasonable amount; otherwise every other website will just look silly for them!

[victor]

CSS2 has max-width as a possibility.

[NeedScripts]

Why not offer end users an option to change the CSS file suitable to their screen resolution. Like in a drop down menu.. put an options.. 800x600, 1280x1024, 1600x1280... etc and you can have CSS style made for each type of screen resolutions...

Hope this helps.. :)

NS

[limbo]

They will most likely have their browser sized to a reasonable amount

I have to disagree with this statement dmorrison

I understand your point but the 'most likely' bit makes me itchy. Grey areas over user habits is one of the reasons I wanted to attempt to write this code.

I have first hand understanding of why people use the high resolution screens - my partner uses 1600x1280 over two monitors for DTP work. He was one of the reasons I feel compelled to add this to the design brief for any new work we do. I have a feeling that this scale of resolution will beceome more common (and then plateau?) so I will not ignore them on the basis that they 'might' resize their browser.

Any site that impresses me often has something for everyone and considers all users and then tailors the site accordingly. I'd like to think I can target all ends of the spectrum from 640x480 to 1600x1280 and I felt that this would be the best method.

However, as you say, not something to lose sleep over but it'd be a nice touch nonetheless

[limbo]

Victor I will have a look at the {max-width} property - sounds very encouraging :)

NeedScripts - This is a real possiblity as we already have a 'toolkit' menu containing CSS options for accessibility users. It could be adapted for this function - would be quite alot of work though.

[tedster]

Yes, max-width is a very hopeful direction. Unfortunately, no version of IE currently support it. I still use it, I just don't "depend" on it for anything critical.

[sitebasics]

Well, you could try enclosing your table in another "wrapper" table and putting in an image in a cell to the right, which prevents the cell on the left from extending past the width you choose. Something like this...

<table width="2000" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<!-- your fabulous table on the left -->
...
...
...
</td>
<td> <!-- and now your spacer gif on the right -->
<img src="clear.gif" width="1000" height="1" border="0" align="right"
</td>
</tr>
</table>

It's a bit of a hack, but it might work for your purposes.

Good luck...
~K~

[brycen]

Creating a max-width table works great for Mozilla:

<table width="100%" style="max-width: 500px;">
<p>...</p>
</table>

With max-width, the user has full freedom to use a narrow or wide browser window, a large or small font. Everything will flow properly. But, the maximum width will be 500 pixels.

Using max-width, in my view, is almost right. "Pixels" are really the wrong metric for text. <table style="max-width: 50em;"> works similarly, but does not break down for high dots-per-inch display screens.

What matters for readability is not the number of pixels, but controlling the maximum number of characters on each line.

[brycen]

And here's how to implement the css2 max-width property for Microsoft IE without full support:
[svendtofte.com...]
(HTML maximum width tutorial)

[tedster]

Nice find, brycen. I can really use that one (after some testing, of course). Thanks.