html - 表格垂直对齐 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 (webkit) 浏览器。

知道如何实现吗？提前致谢。

Answer 1

首先:您为什么要使用表格和嵌套表格？这真的适用于表格数据吗？

针对您的问题:Webkit 很可能严格遵守height 的CSS 规则。 ，这表示，以百分比表示的高度仅适用于包含 block 具有明确高度的情况。

这意味着你需要给主表一个高度(一个单元格/行的高度是根据表格的高度和表格中的其他单元格/行明确计算的)。如果依次以百分比表示，那么还有下一个父级(此处为 body)，依此类推。

所以要么像

.main-table { height: 500px; }

或

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

会有帮助。

(顺便说一句，单元格上的 height: 100% 没有意义。)