表垂直对齐的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

我已经更新您的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; 
} 

Answer 2

第一关：你为什么在那里使用表和嵌套表？这真的是制表数据吗？

对于你的问题：Webkit很可能严格遵守CSS规则height，其中说，百分之百的高度只适用于如果包含块具有明确的高度。

这意味着您需要给主表一个高度（单元格/行的高度是根据表格的高度和表格中的其他单元格/行来显式计算的）。如果这又是百分之百，那么也是下一个父母（这里是body），等等。

因此，要么像

.main-table { height: 500px; } 

或

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

会有所帮助。

（顺便说一句，在小区的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/