HTML表格底部对准问题

我有以下HTML：HTML表格底部对准问题

<style type="text/css"> 
.message-view-value-td { 
    vertical-align:bottom; 
} 
</style> 
<table width="600"> 
<tr> 
<td valign="top" width="15%" class="message-view-label"> 
    <xsl:text>Really long text here that will wrap:</xsl:text> 
</td> 

<td class="message-view-value-td" width="35%"> 
    value1 
</td> 

<td valign="top" width="15%" class="message-view-label"> 
    <xsl:text>Short_Label:</xsl:text> 
</td> 

<td class="message-view-value-td" width="35%"> 
    value2 
</td> 
</tr> 
</table>

而不产生每个标签/值两个内表，是有可能垂直对齐“值2”与“Short_Label”独立地选自“VALUE1”对准？以便每个值在其相应标签的基础级别对齐。

它应该看起来像：

Really long      Short_Label:  Value2 
text here 
that will 
wrap:    Value1 

Another long     Another_label:  Value4 
text value:   Value3

谢谢！

UPDATE-1：即使我创建内部表格，我也会遇到另一个问题：值1和值3应该左对齐到对方。内表解决了第一个问题，但它们打破了这些值的左对齐。现在我真的不知道任何解决方案来解决它:)希望有人可以在这里阐明一些光。

UPDATE-2：这甚至可以用基于CSS的解决方案吗？

来源

2012-02-14 shining-light

''很好，如果它是表格数据（它看起来像_might_ be），但'valign'和'width'已被弃用一段时间。 CSS等价物更受欢迎。 – Ktash 2012-02-14 16:41:15

你为什么使用基于表格的布局？如果可能的话，纯粹的CSS解决方案可能会更好。 – 2012-02-14 16:41:18

我有一个大的HTML，都是使用表，它会花费太多时间来重构。 – 2012-02-14 16:42:56

你的问题的简短回答是“没有，”它不能这样做。如果你可以重新配置你的html，那么你有机会得到你想要的东西，同时保存在一张表中。

看看这个小提琴：http://jsfiddle.net/5U3yc/16/。

它使用span围绕您的标签和值在单个表格单元格以获得您想要的效果。

来源

2012-02-14 20:05:09 ScottS

谢谢@ScottS！一个非常有趣的方法。是的，可以重新配置html到这样的程度。如果保留了不同表格之间的值的左对齐，那么这是理想的解决方案。制作纯CSS的解决方案仍然是一个有趣的练习 - 但这不是必需的。所以非常感谢！ – 2012-02-14 22:10:07

@ danleadgy - 我很高兴为你工作。 – ScottS 2012-02-15 00:05:29

HTML表格底部对准问题

回答

相关问题