2011-05-31 142 views
5

我在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

回答

2

如果doctype設置不正確,IE有問題打印。嘗試在頁面頂部添加文檔類型。在我的測試中,將<!DOCTYPE html>添加到樣本的頂部可以解決問題。

+0

嘎!這確實似乎在伎倆(至少對我來說,希望爲OP)。這也使得我作爲一個測試工作投入,這是一個不錯的附加獎金。很好的發現。 :) – Chris 2011-05-31 13:34:18

+0

賓果!這爲我修好了。十分感謝 – 2011-05-31 14:11:49

0

我有一種感覺這是因爲100%。爲表格設置固定大小的鏈接400px可能會更好。

+0

不好...固定大小可防止用戶選擇除開發人員指定的紙張大小或方向之外的任何紙張大小或方向。 – 2011-05-31 12:22:38

1

只是一個想法,但你可能想調查一個不同的打印介質的CSS文件。這是一種常見的做法,但我不確定我的頭頂上有什麼建議針對您的特定問題。自從我必須爲打印進行詳細標記以來,這已經過去了幾年。

我現在爲我的網站使用Blueprint CSS,並且它有一個單獨的css文件用於打印。 http://www.blueprintcss.org/可能你只是需要像藍圖提供的特定印刷品。

+0

此表格上有用於打印格式的CSS表格。這產生了類似的結果。我正在嘗試blueprintcss的一些CSS規則,現在...將很快發佈我的發現。 – 2011-05-31 12:49:08

0

我有同樣的問題。該網頁我試圖修復是不是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。