Question

This should be simple. I am trying to get a grey bar in a <td> of a table to expand to the full height of the rest of the <tr>. The problem is that the rows and cells are not fixed height.

I’m a believer in table-free layouts, so no need to convert me. I am stuck with a table in this case, so I need to work with it and treat it nicely.

Here’s the HTML:

<table>
    <tr><td>
            <div class="bar"></div>
        </td>
        <td>
            please<br/>
            help<br/>
            me<br/>
            stack<br/>
            overflow<br/>
        </td>
    </tr>
</table>

And the CSS:

td {
    border: 1px solid black;
}

.bar {
    background: #eee;
    width: 10px;
    height: 100%;
    min-height: 100%;
}

Here’s a fiddle: http://jsfiddle.net/DKQVG/4/

Answer 1

Working version with just CSS changes: http://jsfiddle.net/wLtCd/1/

Basically, your TD should have a height defined, so a percentage height makes sense for its child nodes.

Secondly, your div needs to have a display property of 'table'

Full CSS:

td {
    width: 100px;
    border: 1px solid black;
    height: 100%;
}

.bar {
    background: #eee;
    width: 10px;
    height: 100%;
    min-height: 100%;
    display: table;
}

You can remove the width part from above.