CSS-Table dimesions according to a client's screen resolution 2

[alfalf]

Hello.

I'm trying to make an page (with some tables on it) wich will use different styles if screen resolution of an visiting client is different.

Now, I know how to determine users screen resolution (via Javascript - screen.width etc), but don't know how to make an css file containing table styles and then include it in table's styles on my main page (the page that will the accordingly display desirable css style for table).

E.g. I want my table to be wide 768pix if sreen width is 800pix and less and table to be wide 1000pix if screen width is 1024pix wide.
How to acomplish this with css? Is it possible at all?

I have two css files: m1.css (800×600) and m2.css (1024×768) (will add others when I find solution how ).
I have this line of code for proper css file selection (Javascript):
(begin code)
document.writeln('<link href=m'+n+'.css rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>');
(end code)

WHERE n = 1 FOR screen 800×600 and n = 2 FOR screen 1024×768 pix;

When my main page is loaded, style is properely applied, but don't know how to make an style for table.

Thanks for any suggestions!

 

[Vragabond]

Sure it can be done, no problem. Create a class or an ID for the table, which contains its width:

m1.css (800×600) will hold:
#main { width: 768px; }

and m2.css (1024×768) will hold:
#main { width: 1000px; }

Your html should then look like this:

<table id=&quot;main&quot;>
<tr>
<td>
Main
</td>
</tr>
</table>

Hope it helps. Same solution can be achieved using classes.

 

[alfalf]

It really gave me a headache! Now, problem is solved! Thanks - You diserve a star!

 

[ChrisHunt]

Remember two things though:
[ol]
[li] Not everybody surfs with Javascript switched on, these people won't get any stylesheet at all if you're not careful.[/li]

[li]Not everybody surfs with their browser window maximised (I don't, do you?), so even if their screen is 1024 pixels wide it doesn't mean their browser will be.[/li]
[/ol]
Much better (IMO) to use a &quot;liquid&quot; layout, allocating a width of 100% (or whatever) to fill whatever size the browser window happens to be.

-- Chris Hunt

http://www.extracon.com

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[alfalf]

Chris, thanks.