Hi I have 3 tables next to each other, which are all surrounded by another table. The code being something like: <table> <tr><td width="34%"> <table border="0" cellpadding="3" cellspacing="1" class="border"> <tr> <td valign=middle align=center> CONTENT HERE </td> </tr> </table> </td><td width="36%"> <table border="0" cellpadding="3" cellspacing="1" class="border"> <tr> <td valign=middle align=center> CONTENT HERE </td> </tr> </table> </td><td width="30%"> <table border="0" cellpadding="3" cellspacing="1" class="border"> <tr> <td valign=middle align=center> CONTENT HERE </td> </tr> </table> </td></tr></table> Each table has a different amount of content (CONTENT HERE). My problem is that when the screen resolution is changed the tables become thicker or thinner, so there heights change. I want to know if there is a way to code it so that each table with content is always the same height? Any advice would be great!
try this <table[COLOR="Red"] height="100%"[/COLOR]> <tr><td width="34%"[COLOR="Red"] height="100%"[/COLOR]> <table border="0" cellpadding="3" cellspacing="1" class="border"[COLOR="Red"] height="100%"[/COLOR]> <tr> <td valign=middle align=center[COLOR="Red"] height="100%"[/COLOR]> CONTENT HERE </td> </tr> </table> </td><td width="36%"[COLOR="Red"] height="100%"[/COLOR]> <table border="0" cellpadding="3" cellspacing="1" class="border"[COLOR="Red"] height="100%"[/COLOR]> <tr> <td valign=middle align=center[COLOR="Red"] height="100%"[/COLOR]> CONTENT HERE </td> </tr> </table> </td><td width="30%"[COLOR="Red"] height="100%"[/COLOR]> <table border="0" cellpadding="3" cellspacing="1" class="border"[COLOR="Red"] height="100%"[/COLOR]> <tr> <td valign=middle align=center[COLOR="Red"] height="100%"[/COLOR]> CONTENT HERE </td> </tr> </table> </td></tr></table> Code (markup):
Ok that has made it so the table are always the same height, but now it looks like there is no bottom to the table and the content disappears out the bottom of the table