HTML does not print properly - table width exceeding 100%?

Greenhorn

Posts: 10

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

The following HTML looks fine in the browser (both IE6 and Firefox) but when it is printed, I notice some weird things.

Even though I have set the width of all of the tables to be 100%. The width of the detailsTable (the one with the "PRODUCT 1" in it) is wider than the others and even gets cut off when I print it in IE.

I cant seem to figure out why it does this. Any ideas?

<HTML>
<HEAD>
<STYLE type="text/css">
* { font-family: helvetica;}
</STYLE>
</HEAD>
<BODY>
         <div id="page" style="page-break-after: always;">
            <table id="headerTable" width="100%" cellpadding="0" cellspacing="1" height="3cm">
               <tbody><tr valign="bottom">
                  <td width="40%">
                     <table id="pickupTimeTable0" width="100%" cellpadding="0" cellspacing="0">

<tbody><tr valign="bottom">
                           <td style="border: 1px solid ; font-size: 2cm;" width="30%" align="center">B</td>
                           <td style="font-size: 0.75cm;" valign="middle" width="70%" align="left">8 PM Pickup</td>
                        </tr>
                     </tbody></table>
                  </td>
                  <td width="60%">
                     <table id="shipperTable0" width="100%" cellpadding="0" cellspacing="0">

<tbody><tr style="font-size: 0.6cm;" align="right" height="1"><td>AAA Group Inc. - Some Location</td></tr>
                        <tr style="font-size: 0.4cm;" align="right"><td>1233 Main St. Some City, TX 12345-1234</td></tr>
                        <tr style="font-size: 0.4cm;" align="right"><td>Phone: 1231234566</td></tr>
                        <tr style="font-size: 0.4cm;" align="right"><td>Fax: 1231234566</td></tr>
                     </tbody></table>
                  </td>
               </tr>

</tbody></table>
            <table id="titleTable0" style="border: 1px solid ;" width="100%" cellpadding="0" cellspacing="0" height=".5in">
               <tbody><tr>
                  <td style="font-size: 1cm; background-color: LightGrey;" align="center">Customer Pick Up Slip</td>
               </tr>
            </tbody></table>
            <table id="generalInfoTable0" style="border: 1px solid ;" width="100%" height="1.5in">
               <tbody><tr>
                  <td style="font-size: 0.5cm;" valign="top" width="50%" align="left">Customer Number: 12345</td>

<td style="font-size: 0.4cm;" valign="top" align="right">Job Contact: John Doe<br>1234596796</td>
               </tr>
               <tr>
                  <td>
                     <table id="siteTable0" width="100%" cellpadding="0" cellspacing="0" height="100%">
                        <tbody><tr style="font-size: 0.4cm;" align="left">
                           <td valign="top">Attn:  </td>

<td>Random Person</td>
                        </tr>
                        <tr><td></td><td style="font-size: 0.4cm;" valign="top" align="left">Company Name</td></tr>
                        <tr><td></td><td style="font-size: 0.4cm;" valign="top" align="left">1233 Main St. Some City, TX 12345-1234</td></tr>
                        <tr><td></td><td style="font-size: 0.4cm;" valign="top" align="left">Some City, TX 12345-1234</td></tr>
                        <tr><td></td><td style="font-size: 0.4cm;" valign="top" align="left">498-4189-1999</td></tr>

</tbody></table>
                  </td>
                  <td valign="bottom">
                     <table id="pickupDateTable0" style="border: 1px solid ;" align="right" cellpadding="10" cellspacing="0" height="50%">
                        <tbody><tr style="font-size: 0.4cm;"><td align="left">Pickup Date: </td><td align="right">Friday, December 4, 2009</td></tr>
                        <tr style="font-size: 0.4cm;"><td align="left">Mail Date: </td><td align="right">Friday, December 11, 2009</td></tr>
                     </tbody></table>

</td>
               </tr>
            </tbody></table>
               <table id="detailsTable" style="border: 1px solid ;" width="100%" cellpadding="0" cellspacing="0">
                  <tbody><tr>
                     <td valign="top" width="100%">
                        <table id="detailHeaderTable" width="100%" cellpadding="0" cellspacing="0" height="50%">
                           <tbody><tr>

<td style="font-size: 0.65cm;" valign="top" width="35%" align="left">PRODUCT 1</td>
                              <td width="65%">
                                 <table id="totalsTable" width="100%" align="right" cellpadding="3" cellspacing="3" height="50%">
                                    <tbody><tr style="font-size: 0.35cm;" valign="bottom">
                                       <td width="25%" align="right" height="100%">Total A: </td>
                                       <td style="border: 1px solid ;" width="15%" align="right">1</td>
                                       <td width="15%" align="right" height="100%">Total B: </td>

<td style="border: 1px solid ;" width="15%" align="right">43</td>
                                    </tr>
                                    <tr style="font-size: 0.35cm;" valign="bottom">
                                       <td></td><td></td>
                                       <td width="15%" align="right" height="100%">Total C:</td>
                                       <td style="border: 1px solid ;" width="15%" align="right" height="100%">0</td>
                                    </tr>

</tbody></table>
                              </td>
                           </tr>
                        </tbody></table>
                     </td>
                  </tr>
                  <tr>
                     <td valign="bottom" width="100%">
                        <table id="detailItemsTable" width="100%">

<td>
                                          <table id="detailItemTable" width="235px" align="center" cellpadding="3" cellspacing="3" height="100%">
                                             <tbody><tr style="font-size: 0.35cm;">
                                                <td width="70%" align="center">Job 187 TOTALS</td>
                                             </tr>
                                             <tr style="font-size: 0.35cm;">

<td style="border: 1px solid ;" width="70%" align="right">7</td>
                                             </tr>
                                          </tbody></table>
                                       </td>
                                       <td>
                                          <table id="detailItemTable" width="235px" align="center" cellpadding="3" cellspacing="3" height="100%">
                                             <tbody><tr style="font-size: 0.35cm;">
                                                <td width="70%" align="center">Job 188 TOTALS</td>

</tr>
                                             <tr style="font-size: 0.35cm;">
                                                <td style="border: 1px solid ;" width="70%" align="right">9</td>
                                             </tr>
                                          </tbody></table>
                                       </td>
                                       <td>
                                          <table id="detailItemTable" width="235px" align="center" cellpadding="3" cellspacing="3" height="100%">

<tbody><tr style="font-size: 0.35cm;">
                                                <td width="70%" align="center">Job 1202 TOTALS</td>
                                             </tr>
                                             <tr style="font-size: 0.35cm;">
                                                <td style="border: 1px solid ;" width="70%" align="right">9</td>
                                             </tr>
                                          </tbody></table>
                                       </td>
                                       </tr><tr>
                           </tr>
                        </tbody></table>
                     </td>
                  </tr>
               </tbody></table>

<table id="signaturesTable0" style="font-size: 0.325cm;" width="85%" cellpadding="0" cellspacing="0">
                        <tbody><tr>
                           <td width="30%" align="right"><br>Customer Signature</td>
                           <td width="70%" align="center"><br>______________________________________</td>
                        </tr>
                        <tr>
                           <td></td>
                           <td valign="top" align="center">John Doe<br><br></td>

</tr>
                        <tr>
                           <td width="30%" align="right"><br>Driver Signature</td>
                           <td width="70%" align="center"><br>______________________________________</td>
                        </tr>
                        <tr>
                           <td></td>
                           <td align="center">Driver A<br></td>

</tr>
                        <tr>
                           <td valign="bottom" width="30%" align="right">QC Signature</td>
                           <td valign="bottom" width="70%" align="center"><br>______________________________________</td>
                        </tr>
                        <tr>
                           <td valign="bottom" width="30%" align="right">Comments</td>

<td width="35%">
                     <table id="totalsTable0" style="font-size: 0.4cm;" width="100%" cellpadding=".2cm" cellspacing="10">
                        <tbody><tr align="center">
                           <td>Grand Total of A: </td>
                        </tr>
                        <tr align="center">
                           <td style="border: 1px solid ;">1</td>
                        </tr>

<tr align="center">
                           <td>Grand Total of B: </td>
                        </tr>
                        <tr align="center">
                           <td style="border: 1px solid ;">43</td>
                        </tr>
                        <tr align="center">
                           <td>Grand Total of C:</td>

</tr>
                        <tr align="center">
                           <td style="border: 1px solid ;">0</td>
                        </tr>
                     </tbody></table>
                  </td>
               </tr>
            </tbody></table>

</div>
   </BODY>
</HTML>

Eric Pascarello

author

Posts: 15385

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

cm? Never seen anyone actually use that.

For printing, why don't you create a print style sheet and make it fit to a known size page.

Eric

Thanks tiny ad, for helping me escape the terrible comfort of this chair.

Smokeless wood heat with a rocket mass heater

https://woodheat.net