在不影响其他列的情况下增加表格列的高度

Question

我试图使用HTML表格创建发票。但是我面临的问题是当customer address的值很长时，下一列sold by下移。当它达到最大宽度但不影响sold by列时，我想打破</br>的值customer address。这里是我的以下现场演示code：

你能帮我解决这个问题吗？

谢谢:)

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

如果我理解正确的话，你所关心的文本改变垂直位置，而不是实际的柱高。如果是这样的话，那么试试这个：

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

Fiddle