Make a <div> fill its parent <td> height, without specifying height on <td>

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?

@The deleted answer : I already tried this, but it doesn't work. The <div> elements are taking the whole viewport size. — Virus721
– Virus721, Commented Aug 2, 2013 at 7:12

Cave Johnson · Accepted Answer · 2016-12-13 21:47:55Z

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>

Collectives™ on Stack Overflow

Make a <div> fill its parent <td> height, without specifying height on <td>

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related