Make a fill its parent height, without specifying height on

Question

I know there is a similar question here, but it doesn't work in my case.

<table class="Layout">
    <tbody>
        <tr>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
        </tr>
    </tbody>
</table>

How can I make my div.Key elements have the same height as their parent <td> without specifying a height to <td> elements ?

My table will dynamically change (adding and deleting columns and rows) so I can't force the <td> element to an absolute size, and I would also like not to have to compute and give them a relative size every time I modify the table. The .Layout table size also changes dynamically and will always be an absolute value. (For some reasons I would also like not to use row/colspan in case someone suggests that.)

Any idea?

Answer 1

I found a solution by adding an inner div into each div.Key and using display: table; and display: table-cell; This does what I need. Here is the code:

.Layout {
    width: 1024px; /* TEST */
    height: 480px; /* TEST */
}
.Key {
    text-align: center;
    display: table;
    width: 100%;
    height: 100%;
}
.Key > div {
    display: table-cell;
    vertical-align: middle;
}

And :

<table class="Layout">
    <tbody>
        <tr>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
        </tr>
    </tbody>
</table>