TD element inner element height

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/

Tables are for tabulating data. Review your circumstance and determine whether a table is necessary. — Purag, Dec 30 '11 at 11:09

score 2 · Accepted Answer · edited May 23 '17 at 11:48

2

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

edited May 23 '17 at 11:48

Community

1
1

answered Dec 30 '11 at 10:58

mpkossen

81
5

score 2 · Answer 2 · answered Dec 30 '11 at 11:05

yes, it's possible but your example doesn't work because you set height:100% to a div inside another element (the td) with an unspecified height

so just set an height to the td element or calculate the height of a cell via js and then apply that height to the div

score 1 · Answer 3 · answered Dec 30 '11 at 10:54

1

You need to set the height of the tr and then the height of the element by pixels to match see my updated jsfiddle http://jsfiddle.net/peter/7esUV/3/

answered Dec 30 '11 at 10:54

Anagio

3,005
9
44
81

What if I cannot set TR height, then it is impossible to achieve without JavaScript? – newbie Dec 30 '11 at 10:56
See this updated jsfiddle http://jsfiddle.net/peter/7esUV/8/ you set the height by pixel for the div element then and not the TR – Anagio Dec 30 '11 at 11:05

score 1 · Answer 4 · answered Dec 30 '11 at 11:01

1

If you can't set fixed height on td or tr (as you mentioned in your comment to one of the answers), I'm afraid the only way is Javascript:

http://jsfiddle.net/ptriek/xBjCE/

(I used jQuery in this example)

answered Dec 30 '11 at 11:01

ptriek

9,040
5
31
29

TD element inner element height

4 Answers4