HTMLテーブル底アライメント問題

Question

I以下のHTMLを有する：各ラベル/値のための2つの内部テーブルを作成することなく

<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> 

、それは独立して「値1」から「Short_Label」と垂直整列「値2」することが可能であるが整列？そのため、各値は対応するラベルのベースレベルで整列します。

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ベースのソリューションでも可能ですか？

Answer 1

あなたの質問に対する短い答えは「いいえ」です。これはできません。 htmlをいくつか再構成できれば、1つのテーブルに保持しながら、必要なものを得るチャンスがあります。

このフィディーズをご覧ください：http://jsfiddle.net/5U3yc/16/

ラベルの周囲にspanを使用し、の範囲内で、の中に1つの表のセルを使用して、目的の効果を得ます。