I am encountering an issue while creating an invoice using an HTML table. The problem arises when the customer address value is too long, causing the sold by column to shift downwards. I need a way to break the customer address value when it reaches the maximum width without impacting the sold by column. You can view a live demo of my code here.
Can someone please assist me in resolving this dilemma?
Thank you! :)
HTML Code:
<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 Code:
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; }