2011-05-31 19 views
5

He identificado un problema extraño en Internet Explorer y Chrome: tengo una tabla HTML simple sin CSS de diseño, 2 columnas, sin estilos y ancho establecido en 100%. Cuando intento imprimir esta tabla en Internet Explorer (todas las versiones) y Chrome, se descarta la primera celda de la 2ª página y más adelante.La impresión de la tabla HTML elimina celdas en la primera columna

de fragmentos del 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> 

La tabla completa se puede encontrar en: https://gist.github.com/1000367

La salida en la vista preliminar en Internet Explorer, por la página 2 se parece a:

Missing first cell

He añadido las líneas de colores y el círculo para resaltar que la celda izquierda está mal canta.

¿Alguna idea?

He intentado ajustar el relleno de la celda y los márgenes en el exterior de la mesa, sin suerte. Como se ha sugerido, también he añadido las siguientes reglas CSS sin efecto:

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

¿Ha intentado establecer margin & padding en el cuerpo {} en 0? – stefgosselin

+0

Oye, no sé por qué estás intentando esto, ¡¿cómo se encabeza en Second Page !!!! –

+0

@stefgosselin - He intentado establecer el margen y el relleno en el cuerpo con una regla de CSS. Eso tampoco funciona. –

Respuesta

2

IE tiene problemas al imprimir cuando el doctype no está configurado correctamente. Intente agregar un tipo de documento en la parte superior de la página. En mi prueba, agregar <!DOCTYPE html> a la parte superior de su muestra solucionó el problema.

+0

Gah! Eso parece hacer el truco (para mí al menos, con suerte para el OP). También hace que el thead que pongo sea también un trabajo de prueba, lo cual es un buen extra añadido. Buen descubrimiento. :) – Chris

+0

¡Bingo! Eso lo solucionó para mí. Muchas gracias –

0

tengo la sensación de que es debido a la 100%. Puede ser mejor establecer un enlace de tamaño fijo 400px para la tabla.

+0

No es bueno ... El tamaño fijo evita que los usuarios elijan cualquier tamaño u orientación de papel que no sean los especificados por el desarrollador. –

1

Solo un pensamiento, pero es posible que desee investigar un archivo css diferente para los medios impresos. Esta es una práctica común, pero no estoy seguro de qué pensar de su problema específico. Han pasado un par de años desde que tuve que hacer el marcado para imprimir en detalle.

Uso Blueprint CSS para mis sitios ahora y tiene un archivo css por separado para imprimir. http://www.blueprintcss.org/ Podría ser que solo necesita un resent específico para impresión como blueprint.

+0

Había una hoja de CSS en esta tabla para el formato de impresión. Eso produjo un resultado similar. Estoy intentando algunas de las reglas de CSS de blueprintcss ahora ... publicaré mis hallazgos en breve. –

0

Tengo el mismo problema. La página Web que estoy tratando de corregir no es HTML 5, y tiene la siguiente DOCTYPE ...

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

... pero incluso cambiar a HTML 5 ...

<!DOCTYPE HTML> 

... no ayudó. He descubierto que una etiqueta META también estaba causando este problema ...

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

... cuando quité esta etiqueta meta incluso con el DOCTYPE HTML 4 se muestra correctamente.

Cuestiones relacionadas