CODEWITHSUNDEEP
htmlcsshtml-table
newbie
newbie

Reputation: 24645

TD element inner element height

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/

Upvotes: 1

Views: 1809

Answers (4)

mpkossen
mpkossen

Reputation: 81

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

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

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

Upvotes: 2

ptriek
ptriek

Reputation: 9276

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)

Upvotes: 1

Anagio
Anagio

Reputation: 3075

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/

Upvotes: 1

Related Questions