CODEWITHSUNDEEP
csscss-tables
Jeremy S.
Jeremy S.

Reputation: 6653

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 same 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.

Upvotes: 1

Views: 5391

Answers (3)

clairesuzy
clairesuzy

Reputation: 27674

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/

Upvotes: 3

MarioRicalde
MarioRicalde

Reputation: 9487

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());
    }
});

Upvotes: 1

Sotiris
Sotiris

Reputation: 40096

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/

Upvotes: 2

Related Questions