Hi,

The website I'm working on consists of a centered table 624 pixels wide. On my ipad, it looks great when in landscape mode, with some whitespace on both sides of the main table. But in portrait mode, instead of cutting off the whitespace and just mostly showing the table (iPad screens are 768x1024 while in portrait), it simply shrinks the entire thing, so that the same amount of whitespace is shown, but the whole thing is shrunk to fit the smaller width. The problem is much worse on smaller mobile devices, where the whole thing (whitespace included) is all shrunk down to fit in those screens, which can be 320 width or smaller.

My css just dictates an absolute width for the table, not a percentage, yet the page seems to want to have a certain whitespace. Sure the user can just zoom in, but it's inconvenient, and impractical on smaller devices.

Here's my css for the body and main table (there's more css, but it's unrelated to this issue):

Code:
body {
	color:#FFF;
	background-color:#000;
	font-family:Helvetica,Arial,Verdana;
}

.mainTable {
	padding: 8px 16px;
	border-style: solid;
	border-width: 1px;
    width: 624px;
}
There is nothing outside this table, i.e., all the content of the website is in a cell of the "mainTable".

Can anyone give any suggestions on how to make it so that when viewed in landscape mode it has some whitespace on the sides, but when viewed in portrait or on a smaller mobile device it shows as much of the main table (and as little whitespace on the sides) as possible?

Many thanks...