Print HTML Table Cut off

john_yourspace
john_yourspace used Ask the Experts™
on
Hi guys,

I am having some problem with a long html table been cut off when printing, this is happening in most browsers specfically firefox

I am using two stylesheets one for print one for display

<link type="text/css" rel="stylesheet" href=">css/main.css" />
<link type="text/css" rel="stylesheet" href="css/print.css" media="print"/>


My table looks like this (code is a coldfusion record set looped for 500+ records)

<table>
                    	<thead>
						<tr>
								<th>QTY</th>
								<th>Item #</th>
								<th>Description</th>
								<th>Unit Price</th>
								<th>Total Price</th>	
						</tr>
						</thead>
                        
                       
                        
                        
                        <tbody>
						<cfset total = 0>
						<cfoutput query="rsOrder_t">
							<tr>
								<td>#rsOrder_t.qtytoorder#</td>
								<td>#rsOrder_t.item_num#</td>
								<td>#rsOrder_t.description#</td>
								<td>#rsOrderlist_t.currency_symbol##LSCurrencyFormat(rsOrder_t.price , "none")#</td>
								<cfset totalItemprice = rsOrder_t.price *rsOrder_t.qtytoorder>
								<td>#rsOrderlist_t.currency_symbol##LSCurrencyFormat(totalItemprice , "none")#</td>	
								<cfset total = total + totalItemprice>
							
							</tr>
						</cfoutput>
                        </tbody>
                        
                          <tfoot>
						<tr>
							<td colspan="1">&nbsp;</td>
							<td colspan="1">Total</td>
							<td colspan="5" align="right">
								<cfoutput>#rsOrderlist_t.currency_symbol##LSCurrencyFormat(total, "none")#</cfoutput>
							</td>
						</tr>
						</tfoot>
                       
					</table>

Open in new window


print style looks like this

print.css
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
LZ1
Top Expert 2011

Commented:
Do you have a live URL we can look at and test?

Also, what do you mean by "being cut off"? Vertically? Horizontally?

Author

Commented:
Sorry it's on an intranet so no live URL , I may be able to mock it up on a dev site

It's cut off vertically

John
LZ1
Top Expert 2011
Commented:
Ok, no problem.

Have you tried this in your print.css?

 table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }

Open in new window

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Hi LZ1,

I have tried that but no joy.

John

Author

Commented:
Here is a test link to see stripped code

http://yourspacewebdesign.com/test.html
LZ1
Top Expert 2011

Commented:
I get a 404 error on that page
sorry got sorted had a div with overflow: hidden,

Author

Commented:
had a div with overflow: hidden,

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial