How to style a div to fill the entire contents of a table cell?

Question

I am trying to style the divs to fill the entire contents of the table cell. That means that the background color should fill the height of the table cell. How can I get the div to fill the height of the table cell?

<style>
    body { background-color: #ccc; }
    table, tr, td { border: 2px solid #00f; }
    td > div { background-color: #fff; color: #f00; padding: 5px;}
</style>

<table>
    <tr>
        <td>
            <div style="position: relative; z-index: 1000">
                line<br />line<br />line
            </div>
        </td>
        <td>
            <div style="position: relative; z-index: 1000">fill contents</div>
        </td>
    </tr>
</table>

The background color should fill the height of the "fill contents" table cell:

Here is a jsfiddle to play with.

Also, the reason I am asking this is because I can't style the td tag due to a workaround in my JavaScript.

Update: This may help to visualize my specific problem: http://jsfiddle.net/pjd6x/8/ There is an overlay that is appearing on top of the table (intentionally) and below the divs (also intentional), but I would like the divs to be the same height (to look as if they are filling the contents of the tds).

Answer 1

If your elements can have a fixed height:

td > div {
    background-color:#FFFFFF;
    color:#FF0000;
    padding:5px;
    display:table-cell;
    height:80px;
    vertical-align:middle;
}