表垂直對齊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>

CSS：

.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（網絡工具）瀏覽器。

知道我該如何實現嗎？ 提前致謝。

Answer 1

首先，為什么要使用表格和嵌套表格？ 這是真的用於表格數據嗎？

對於您的問題：Webkit最有可能嚴格遵守height的CSS規則，即，以百分比表示的高度僅在包含塊具有顯式高度的情況下適用。

這意味着您需要給主表指定一個高度（一個單元格/行的高度是根據表的高度以及該表中其他單元格/行的高度顯式計算的）。 如果依次是百分比，那么下一個父對象（此處為body ），依此類推。

所以像

.main-table { height: 500px; }

要么

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

會有所幫助。

（順便說一句， height: 100%單元格上的height: 100%沒有意義。）

Answer 2

一個簡單的解決方案是用填充填充空間：

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

這是演示： http : //jsfiddle.net/z4m7r/11/

- 編輯 -

將父表設置為100％的高度，這應該可以解決問題。 演示： http ： //jsfiddle.net/z4m7r/9/

Answer 3

我已經更新了您的jsfiddle： http : //jsfiddle.net/z4m7r/6/

首先，我不會在另一個表中使用一個表，因為它將使標記成為閱讀和維護的噩夢。 將一排放在桌子的底部，另一排放在桌子的底部也很困難。 相反，我只是將兩個div放在單元格內：

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

接下來，我將父單元格的位置設置為相對，並將底部div設為絕對：

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

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

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