Ik ben een HTML / CSS document aan het maken voor een kassabon, de HTML / CSS wordt d.m.v. van een plugin omgezet naar PDF. Nu worden de product items pingelden d.m.v. de database waardoor ze de ene keer heel lang zijn en de andere keer weer kort. Hoe kan ik de lengte van de product item regel limiteren?

Zo ziet het er nu uit, zoals je ziet loopt de chicken tikka masala .... rechts af en ik zou dat dus automatisch op een nieuw regel willen: http://i58.tinypic.com/1zgfibb.jpg
Dit is de code:

<style>
#main h1 {
font-size: 15px;
color: #3E3535;
font-family: Arial, Helvetica, sans-serif;
}
#main h2 {
font-size: 13px;
color: #3E3535;
font-family: Arial, Helvetica, sans-serif;
}
#main p{
font-size: 12px;
color: #3E3535;
font-family: Arial, Helvetica, sans-serif;
padding: 0 10px;
}


#main table,th,td{
font-size: 12px;
color: #3E3535;
font-family: Arial, Helvetica, sans-serif;
}


img.logo {
display: block;
margin-left: 22px;
margin-top: 10px;
width: 220px;
}


</style>


<div id="main">


<p style="text-align: justify; margin-top: -1px; margin-left: 33px;"><h1>Bestellingen (JH435456)</h1></p>


<p><table style="margin-top: -20px; margin-left: -6px;">
<tr>
<td>
<table>
<tr><td><strong>Restaurant:</strong></td></tr>
<tr><td><strong>Telefoon:</strong></td></tr>
<tr><td><strong>Datum:</strong></td></tr>
</table>
</td>


<td>
<table style="margin-left: 5px;">
<tr><td>%name_restaurant%</td></tr>
<tr><td>%phone%</td></tr>
<tr><td>%date%</td></tr>
</table>
</td>
</tr>
</table></p>

<div style="text-align: center; margin-top: -10px; width: 260px;">
<h2><strong>LET OP! DE KLANT HEEFT <br />AL ONLINE BETAALD.</strong></h2>
</div>


<p><table style="margin-top: -10px; margin-left: -6px;">
<tr>
<td>
<table>
<tr><td><strong>Aantal</strong></td></tr>
</table>
</td>


<td>
<table style="margin-left: 5px;">
<tr><td style="width: 10px;"><strong>Product</strong></td></tr>
</table>
</td>


<td>
<table style="margin-left: 10px;">
<tr><td><strong>Prijs</strong></td></tr>
</table>
</td>
</tr>
%details%
</table></p>


<p><table style="margin-top: -13px; margin-left: -6px;">
<tr>
<td>
<table>
<tr><td><strong>Bezorgkosten:</strong></td></tr>
<tr><td><strong>Totale prijs:</strong></td></tr>
</table>
</td>


<td>
<table style="margin-left: 30px;">
<tr><td>&euro; %bezorgkosten%</td></tr>
<tr><td>&euro; %total%</td></tr>
</table>
</td>
</tr>
</table></p>


<p><h2 style="margin-top: -5px;">Klantgegevens:</h2>


<table style="margin-top: -10px; margin-left: -6px;">
<tr>
<td>
<table>
<tr><td><strong>Volledige Naam:</strong></td></tr>
<tr><td><strong>Straat:</strong></td></tr>
<tr><td><strong>Postcode:</strong></td></tr>
<tr><td><strong>Stad:</strong></td></tr>
<tr><td><strong>Telefoon:</strong></td></tr>
</table>
</td>


<td>
<table style="margin-left: 5px;">
<tr><td>%naam%</td></tr>
<tr><td>%adres%</td></tr>
<tr><td>%postcode%</td></tr>
<tr><td>%stad%</td></tr>
<tr><td>%telefoon%</td></tr>
</table>
</td>
</tr>
</table></p>


<p><h2 style="margin-top: -5px;">Overige Gegevens:</h2>


<table style="margin-top: -10px; margin-left: -6px;">
<tr>
<td>
<table>
<tr><td><strong>Tijdstip Bezorging:</strong></td></tr>
<tr><td><strong>Betaald met:</strong></td></tr>
<tr><td><strong>Opmerking:</strong></td></tr>
</table>
</td>


<td>
<table style="margin-left: 5px;">
<tr><td>%moment%</td></tr>
<tr><td>%betaling%</td></tr>
<tr><td>%opmerking%</td></tr>
</table>
</td>
</tr>
</table></p>

</div>

De tabel een breedte geven van 90%?

had ik al geprobeerd maar dat lukt niet

Je tabel opmaak zou ik even nakijken, klopt niet zoveel van...
Maar op elke table moet je dan een width zetten, niet alleen de eerste.