Полная высота div внутри td

Я хочу достичь этой цели:

Высота строки таблицы и серой строки должна быть динамической, зависит от содержимого в правом столбце.

Я читал в Как сделать <div> fill <td> высота, поэтому я попытался с этим http://jsfiddle.net/hyNWy/

Но все равно не повезло. Любые предложения?

Ответ 1

С двоеточием? Кроме того, чтобы получить ваш интервал:

<td style="position:relative;">
    <div style="width: 10px; position:absolute; top:10px; bottom:10px; background:grey">
    </div>
</td>

EDIT:

Я не думаю, что это возможно без указания явной высоты. Решение в оригинальном вопросе, на которое вы указали, на самом деле не работает. position:relative, похоже, не корректно применяется к ячейкам таблицы. Это может быть преднамеренным и частью спецификации.

Ответ 2

Вы пробовали

<table>
    <tr>
        <td>
            <div>
            </div>
        </td>
    </tr>
</table>

tr {  }
td { position:relative;height:300px; display:block; }
div {
    width:10px;
    position:absolute;
    bottom:10px;
    top:10px;
    display:block;
    background:grey
}

Здесь jsfiddle.