1

给定以下示例：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) 浏览器。

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

4

3 回答 3

1

首先：你为什么要使用表格和嵌套表格？这真的是表格数据吗？

对于您的问题：Webkit 很可能严格遵守 CSS 的height规则，该规则说，仅当包含块具有明确的高度时，以百分比表示的高度才适用。

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

所以要么像

.main-table { height: 500px; }

或者

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

会有所帮助。

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

于 2013-03-05T14:00:15.277 回答
1

一个简单的解决方案是用填充填充空间：

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

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

- 编辑 -

将父表设置为 100% 高度，它应该可以解决问题。演示：http: //jsfiddle.net/z4m7r/9/

于 2013-03-05T14:03:51.940 回答
-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;
}
于 2013-03-05T13:55:05.677 回答