Question

I have problem that I have element inside TD element and when I set element height to 100% it won’t fill whole TD cell in height. Is it possible to fill whole whole TD height in inner element if its content has not same height?

HTML

<table>
<tr>
    <td>
        <div>
            1<br/>
        </div>
    </td>
    <td>
        <div>
            2<br/><br/><br/>
        </div>
    </td>
</tr>
</table>

CSS

table {
 width: 200px;
 position: relative; 
 }
 table tr td {
 background-color: blue;
 width: 47%;
 position: relative;
 margin: 10px 1%;
 border: 1px solid #eee;
 }
 table tr td div {
 height: 100%;
 background-color: red;
 }

See following jsfiddle for example:

http://jsfiddle.net/7esUV/

Answer 1

This is not possible with css, as the table cell height is based on it’s contents. The div bases it’s height on the height of it’s parent, in this case the table cell. Thus, if there is only one line, that line’s height is the hight of the table cell and thus of the div inside it.

Please see here why a div inside a table cell is a bad idea: Is a DIV inside a TD a bad idea?.