HTML表格的打印在第一列中删除单元格

问题描述:

我在Internet Explorer和Chrome中发现了一个奇怪的问题:我有一个简单的HTML表格,没有布局CSS,2列,没有样式,并且宽度设置为100%。当我尝试在Internet Explorer(所有版本)和Chrome中打印此表时,会丢弃第二页及更高版本中的第一个单元格。HTML表格的打印在第一列中删除单元格

片段的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> 

整个表,可以发现: https://gist.github.com/1000367

在Internet Explorer上的打印预览输出,2页的样子:

Missing first cell

我已添加彩色线条和圆圈以突出显示左侧单元格是错误的唱。

任何想法?

我已经试过调整cellpadding和表外边缘,没有运气。至于建议,我还增加了以下CSS规则没有影响:

BODY { margin: 0px; padding: 0px; } 
+1

您是否尝试将body {}的边距和填充设置为0? – stefgosselin 2011-05-31 12:11:41

+0

嘿,我不知道你为什么试图这样,它如何在第二页的头! – 2011-05-31 12:22:03

+0

@stefgosselin - 我试图用CSS规则在body上设置边距和填充。那也行不通。 – 2011-05-31 12:24:34

如果doctype设置不正确,IE有问题打印。尝试在页面顶部添加文档类型。在我的测试中,将<!DOCTYPE html>添加到样本的顶部可以解决问题。

+0

嘎!这确实似乎在伎俩(至少对我来说,希望为OP)。这也使得我作为一个测试工作投入,这是一个不错的附加奖金。很好的发现。 :) – Chris 2011-05-31 13:34:18

+0

宾果!这为我修好了。十分感谢 – 2011-05-31 14:11:49

我有一种感觉这是因为100%。为表格设置固定大小的链接400px可能会更好。

+0

不好...固定大小可防止用户选择除开发人员指定的纸张大小或方向之外的任何纸张大小或方向。 – 2011-05-31 12:22:38

只是一个想法,但你可能想调查一个不同的打印介质的CSS文件。这是一种常见的做法,但我不确定我的头顶上有什么建议针对您的特定问题。自从我必须为打印进行详细标记以来,这已经过去了几年。

我现在为我的网站使用Blueprint CSS,并且它有一个单独的css文件用于打印。 http://www.blueprintcss.org/可能你只是需要像蓝图提供的特定印刷品。

+0

此表格上有用于打印格式的CSS表格。这产生了类似的结果。我正在尝试blueprintcss的一些CSS规则,现在...将很快发布我的发现。 – 2011-05-31 12:49:08

我有同样的问题。该网页我试图修复是不是HTML 5,并具有以下DOCTYPE ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

...但即使切换到HTML 5 ...

<!DOCTYPE HTML> 

...没有帮助。我发现一个META标记也造成这个问题...

<META content="IE=5.0000" http-equiv="X-UA-Compatible"> 

...当我删除这个元标记,即使它正确显示的HTML 4 DOCTYPE。