Table: Same height for cells in rows

I am facing the following problem. I have a legacy application with table based layout.

In one case I have nested tables where I want to have the same height for two inner tables in the same row.

See here:

http://jsfiddle.net/q6aZ3/

I want to have the sam开发者_开发问答e height for both green and red inner table.

Hope someone can help.

EDIT: The height of the inner tables has to be flexible, only in this example I used a fixed with for one of the inner tables, this isn't the normal case.

as mentioned above about the height on one table but not the other, you could add the desired height onto the parent tr and then leave both nested tables (the ones with the green and red backgrounds) at height = 100% which they both already have via their HTML attributes too

<table>
   <tr style="height: 400px;">...
     ....

   <table style="background:green" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
    ....

   <table style="background:red" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">

http://jsfiddle.net/clairesuzy/q6aZ3/4/

this happens because the red table has inline css height:400px. Add height:400px for red table also and they will have the same height.

Demo: http://jsfiddle.net/q6aZ3/1/

As Sotiris mentioned this is because on one you have a inline declaration for the height; but not for the second one. If what you want is making them both variable height and make them always be of the same height you can do it with some JavaScript:

$(document).ready(function() {
    var green = $('#ext-gen1611'), red = $('.newframeContainer');
    if(red.height() > green.height()) {
        green.height(red.height());
    } else {
        red.height(green.height());
    }
});