How to apply height 100% to table-cell contents

Question

I have two table cells in one row. First one has small div, second one has larger one. Second div stretches the whole row. How do I make the first div stretch to the whole cell as well?

This is what I get:

This is what I want:

HTML:

<table>
    <tr class="tr">
        <th class="th">
            <div class="div green">This div is short</div>
        </th>
        <th class="th">
            <div class="div blue">This div has more content so it pushes 
            the height of the whole row. However, the shorter div doesn't 
            stretch to the whole row. How do I fix this?</div>
        </th>
    </tr>
</table>

CSS:

.tr {
    width:100%;
    border:1px solid red;
    height:auto;
}
.th {
    display:table-cell;
    width:50%;
}
.div {
    /* What should be here? */
}
.green {
    background:green
}
.blue {
    background:blue
}

jsfiddle here

Why I need this: the table stores lots of tabular data. Table headers contain widgets for filtering out table contents, and these widgets have variable height.

Answer 1

The easiest way is to add height: 100%; to .inner and change height: auto; from .tr to height: 100%;:

.container{
    width:100%;
    border:1px solid red;
    height: 100%;
}
.outer{
    display:table-cell;
    width:50%;
}
.inner{
    height: 100%;
}
.green{
    background:green
}
.blue{
    background:blue
}

This, however, will mean your text is not centered vertically in the cell anymore. Even though that's what you have shown, it's not the default/proper behavior for table-cell content. This is because there is a div nested inside.

You can remove your child divs and simply slide their classes up to the <th> elements, and it will center the text, work more semantically, and use less code:

HTML:

<table>
    <tr class="container">
        <th class="outer green">first</th>
        <th class="inner outer blue">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </th>
    </tr>
</table>

CSS:

.container {
    width: 100%;
    border: 1px solid red;
    height: 100%;
}

.outer {
    display: table-cell;
    width: 50%;
}

.green {
    background: green;
}

.blue {
    background: blue;
}

JSFiddle Example