Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Christian Unigarro
Christian Unigarro
7,177 Points

¿How to set full height for a table inside a table cell (td) in css?

This is an example for better understanding: https://jsfiddle.net/cunigarrod/ador2mrw/. The table of pink color don´t full the td cell in height size.

The use of a table inside an other table is because the inner table is called from backend completely, the other way this won´t be the case.

2 Answers

jag
jag
18,266 Points

One trick you can do is on the <td> tag that contains the table you can set the vertical alignment to middle.

Remove the border from the inner table and that should give you the result. As for it to take up 100% height it's a bit tricky since it's a table inside a table.

https://jsfiddle.net/n1ynpymc/1/

Greg Kaleka
Greg Kaleka
39,021 Points

Hi Christian,

Tables are tricky. The only way I was able to make this work was by explicitly setting the height of the internal table:

<table class="table-bordered" style="background-color: pink; height: 57px;">
jag
jag
18,266 Points

The only issue with that is if the content on left td changes then the height needs to be updated again.