Print of HTML table drops cells in first column
I have identified a strange problem in Internet Explorer and Chrome: I have a simple HTML table with no layout CSS, 2 columns, no styles, and width set to 100%. When I attempt to print this table in Internet Explorer (all versions) and Chrome, the first cell on the 2nd page and later is dropped.
Snippet of the HTML:
<html>
<head></head>
<body>
<table width='100%' cellspacing='0'>
<tr><td align='left'>Date</td><td align='left'>Order No.</td></tr>
<tr><td align='left'>5/24/2011</td><td align='left'>287426</td></tr>
<!-- SNIP :: Many more rows -->
</table>
</body>
</html>
The entire table can be found at: https://gist.github.com/1000367
The output in th开发者_JAVA技巧e Print Preview on Internet Explorer, for page 2 looks like:
I have added the colored lines and circle to highlight that the left cell is missing.
Any ideas?
I've tried adjusting cellpadding and margins on the outside of the table, with no luck. As suggested, I have also added the following css rules with no effect:
BODY { margin: 0px; padding: 0px; }
IE has issues printing when the doctype isn't set correctly. Try adding a doctype at top of the page. In my test adding <!DOCTYPE html> to the top of your sample fixed the issue.
Just a thought, but you may want to investigate a different css file for print media. This is a common practice, but I am not sure exactly off the top of my head what to suggest for your specific issue. Its been a couple of years since I had to do markup for printing in detail.
I use Blueprint CSS for my sites now and it has a separate css file for print. http://www.blueprintcss.org/ Could be you just need a print specific resent like blueprint offers.
I have a feeling it is because of the 100%. It might be better to set a fixed size link 400px for the table.
I have the same issue. The web page I am trying to fix is not HTML 5, and has the following DOCTYPE...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
... but even changing to HTML 5 ...
<!DOCTYPE HTML>
... did not help. I found that a META tag was also causing this problem...
<META content="IE=5.0000" http-equiv="X-UA-Compatible">
... when I removed this meta tag even with the HTML 4 DOCTYPE it displayed correctly.
加载中,请稍侯......
精彩评论