Question

I have the following 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>

Without creating two inner tables for each label/value, is it possible to vertical align “value2” with “Short_Label” independently from “value1” alignment? So that each value aligns at the base level of it’s corresponding label.

It should look like:

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

Another long                    Another_label:      Value4
text value:         Value3

Thanks!

UPDATE-1: even if I create inner tables, I get into another issue: Value1 and Value3 should be left-aligned to each-other. Inner tables solve the first issue but they break this left-alignment of the values.
Now I really don’t know any solution to solve it 🙂 Hope someone could shed some light here.

UPDATE-2: is this even possible with a CSS-based solution?

Answer 1

The short answer to your question is “No,” it cannot be done. If you can reconfigure your html some, then you have a chance of getting what you want while keeping it in a single table.

Take a look at this fiddle: http://jsfiddle.net/5U3yc/16/.

It uses span around your label and value within a single table cell to get your desired effect.