Таблица вертикального выравнивания WebKit проблема

Question

Учитывая следующий пример: http://jsfiddle.net/upsidown/z4m7r/

HTML:

<table class="main-table" cellspacing="20"> 
    <tr> 
     <td style="height:100%;"><table class="sub-table"><tr><td>Some text</td></tr><tr><td class="bottom-align">Some bottom aligned element</td></tr></table></td> 
     <td>Some very long text. Some very long text. Some very long text. Some very long text. Some very long text. Some very long text. </td> 
     <td>Some other text</td> 
    </tr> 
</table> 

УС:

.main-table { 

    width:300px; 
    vertical-align: top; 
} 

.main-table td { 

    vertical-align: top; 
} 

.sub-table { 

    height:100%; 
} 

td { 

    border:2px solid black; 
} 

td.bottom-align { 

    vertical-align: bottom; 
    background:yellow; 
} 

Желтый текст ячейки должен быть выровнены по вертикали в нижней части. Это работает в Firefox, но не в браузерах Safari/Chrome (webkit).

Любая идея, как я могу это достичь? Заранее спасибо.

Answer 1

Я обновил свой jsfiddle: http://jsfiddle.net/z4m7r/6/

Для начала, я бы не использовать таблицы внутри другой таблицы, как это сделает разметку кошмар для чтения и сохранения. Также трудно поставить один ряд внизу стола, а другой внизу. Вместо этого я просто поставить две дивы внутри клетки:

<td class="firstcell" style="height:200px;"> 
    <div>Some text</div> 
    <div class="bottom">Some bottom aligned text</div> 
</td> 

Далее я установить позицию родительской клетки к родственнику, и сделал нижний ДИВ абсолют:

.firstcell { 
    position: relative; 
    width: 100px; 
} 

.firstcell > div { 
    border: solid thin black; 
} 

.bottom { 
    position: absolute; 
    bottom: 0; 
    background: yellow; 
} 

Answer 2

Во-первых: Почему ты используя таблицы и вложенные таблицы? Это действительно для данных табуляции?

К вашему вопросу: Webkit, скорее всего, строго соблюдает правила CSS для height, в котором говорится, что высота в процентах применяется только в том случае, если содержащийся блок имеет явную высоту.

Это означает, что вам нужно указать высоту главного стола (высота ячейки/строки явно вычисляется с высоты таблицы и других ячеек/строк в таблице). И если это в свою очередь в процентах, то и следующий родитель (здесь body) и так далее.

Так что либо что-то вроде

.main-table { height: 500px; } 

или

html, body, .main-table { height: 100%; } 

поможет.

(BTW, height: 100% на клетку не имеет смысла.)

Answer 3

Простое решение, чтобы заполнить пространство с дополнением:

td.bottom-align { 
    padding-top:100%; 
    vertical-align: bottom; 
    background:yellow; 
} 

Вот демо: http://jsfiddle.net/z4m7r/11/

- -EDIT--

Установите родительскую таблицу высотой 100%, и она должна сделать трюк. Демо: http://jsfiddle.net/z4m7r/9/