Question

I am trying to create an invoice using HTML table. But the problem I am facing is when the value of customer address is very long the next column sold by moves down. I want to break</br> the value of customer address when it reaches the maximum width but without affecting the sold by column. Here’s the live demo of my following code:

Could you please help me to solve this problem?

Thanks:)

My HTML

<table width="100%" id="info"  align="center">
<tr>
<td class="item-left">Invoice# </td><td width="35%">: INV-PC-2012-000001</td>
<td class="">Date</td><td>: 2012-08-30</td>
</tr>

<tr>
<td class="item-left">Customer Name</td><td>: Charlie Sheen</td>
<td class="">Time</td><td>: 6:46:49 PM</td>
</tr>

<tr>
 <td class="item-left">Customer Address</td><td class="customer_addr">:Long Address Long Address Long Address Long Address Long Address</td>
<td class="">Sold By</td><td>: John Cryer</td>
</tr>​
</table>

CSS

body {font-size:75%;color:#222; font-family: Geneva, Arial, Helvetica, sans-serif;  }
#info { clear: both; width: 100%; margin: 30px 0 0 0; table-layout: fixed;border-collapse: collapse; }
#info table { }
#info td{ padding-top: .3em;padding-bottom: .3em;}
#info td.item-left { width: 150px; }​

Answer 1

If I understand you correctly you are concerned about the changing vertical position of the text, not the actual column height. If that’s the case then try this:

#info td{ padding-top: .3em;padding-bottom: .3em;vertical-align:top;}

Fiddle