表格垂直对齐webkit问题答案

【问题标题】：Table vertical alignment webkit issue表格垂直对齐webkit问题
【发布时间】：2013-03-06 22:20:45
【问题描述】：

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

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

【问题讨论】：

标签： html css html-table

【解决方案1】：

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

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

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

所以要么像

.main-table { height: 500px; }

或

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

会有帮助。

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

【讨论】：

我不敢相信我错过了桌子没有设置高度的事实。

【解决方案2】：

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

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

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

--编辑--

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

【讨论】：

如果带有“非常长的文本”的中间单元格实际上是左侧单元格大小的两倍，则此方法有效。如果没有，那么 padding-top:100%;在中间单元格的底部创建一个间隙。见jsfiddle.net/upsidown/z4m7r/8
试试我的编辑。您需要将父表设置为 100% 高度。
似乎有效。我需要进一步测试一下。如果它按预期工作，我会接受你的回答！谢谢

【解决方案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;
}

【讨论】：