Html 表垂直对齐webkit问题

给出以下示例：

HTML:

黄色单元格文本应在底部垂直对齐。这适用于Firefox，但不适用于Safari/Chrome（webkit）浏览器

---

你知道我怎样才能做到吗？提前感谢。

我已经更新了您的JSFIDLE:

首先，我不会在另一个表中使用一个表，因为它会使标记成为读取和维护的噩梦。把一行放在桌子底部，另一行放在桌子底部也很困难。相反，我只是在牢房里放了两个div：

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

---

我已经更新了您的JSFIDLE：

首先，我不会在另一个表中使用一个表，因为它会使标记成为读取和维护的噩梦。把一行放在桌子底部，另一行放在桌子底部也很困难。相反，我只是在牢房里放了两个div：

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

---

首先：为什么要使用表和嵌套表呢？这真的是针对tabluar数据的吗

对于您的问题：Webkit很可能严格遵守CSS规则，也就是说，只有当包含块具有明确的高度时，以%表示的高度才适用

这意味着您需要为主表指定一个高度（单元格/行的高度是根据表和表中其他单元格/行的高度显式计算的）。如果这反过来是%的话，那么下一个家长（这里是

body

），依此类推

所以要么

.main-table { height: 500px; }

或

会有帮助的

---

（顺便说一句，单元格上的

高度：100%

没有意义。）

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

对于您的问题：Webkit很可能严格遵守CSS规则，也就是说，只有当包含块具有明确的高度时，以%表示的高度才适用

这意味着您需要为主表指定一个高度（单元格/行的高度是根据表和表中其他单元格/行的高度显式计算的）。如果这反过来是%的话，那么下一个家长（这里是

body

），依此类推

所以要么

.main-table { height: 500px; }

或

会有帮助的

---

（顺便说一句，单元格上的

高度：100%

没有意义。）

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

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

下面是演示：

--编辑--

---

将父表设置为100%的高度，它应该可以做到这一点。演示：

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

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

下面是演示：

--编辑--

---

将父表设置为100%的高度，它应该可以做到这一点。演示：

如果中间的“非常长的文本”单元格的大小实际上是左侧单元格的两倍，则此操作有效。如果没有，则填充顶部：100%；在中间单元的底部创建间隙。请参见“尝试我的编辑”。您需要将父表设置为100%的高度。似乎有效。我需要进一步测试一下。我会接受你的答案，如果它的工作预期！如果中间有“非常长的文本”的单元格的大小真的是左边单元格的两倍，那就感谢这一点。如果没有，则填充顶部：100%；在中间单元的底部创建间隙。请参见“尝试我的编辑”。您需要将父表设置为100%的高度。似乎有效。我需要进一步测试一下。我会接受你的答案，如果它的工作预期！我不敢相信我错过了桌子没有设置高度的事实。我不敢相信我错过了桌子没有设置高度的事实。

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