How Can I Make My Table Auto-adjust The Heigth Besed On The Screen Resolution

The table below is used to display a map and some relevant data( I cleaned everything for better readability). The left part is a 'vertically scrollable table'. The right part is a

Solution 1:

Please check out this article i have below. You should not be using tables to layout or grid up your pages as you have done.

http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

Also just a hint as well, you shouldn't be using inline CSS styles it is very bad practice and makes modifying templates and pages very difficult in the future so use classes and a stylesheet to define any styles and/or layouts for yout pages. They are more dynamic and much easier to fix later on.

Demo of clean coding for you here: http://jsfiddle.net/nshJH/

Using <div>'s you can just use the

float: xxxx;
clear: xxxx;

This is a simple example of a clean fluid page for you that is dynamic to the content it contains. Also please note that i can change any of the width or text properties on the fly through one place in my CSS...

Solution 2:

you can use a fixed or absolute position of the table and use bottom and top coordinates to fix the height.

table {
 position: absolute;
 top: 0px;
 bottom: 0px;
 width:100%;
}

greetings!

Solution 3:

In order to stretch it out vertically, you have to set every nested element from html down to have height: 100%. Should look something like this:

html, body, #maparea, table, #googlemaps1 { height: 100%; }

For contrast:

• Without the height CSS set
• With