2011-09-12 6 views
7

Cuando imprimo esto, a la izquierda y en la parte superior de la tabla en la segunda página falta el borde. ¿Cómo puedo arreglar esto?Media print multiple pages table-border-layout

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <style type="text/css"> 
     @media print 
     { 
      body { 
       margin: 0; 
       padding: 0; 
       color: #000000 !important; 
       background-color: #ffffff !important; 
      } 
      * { 
       color: inherit !important; 
       background-color: transparent !important; 
       background-image: none !important; 
      } 
      table { 
       width: 100%; 
       border: 1pt solid #000000; 
       border-collapse: collapse; 
       font-size: 11pt; 
      } 
      #space { height: 750px; } 
     } 
    </style> 
</head> 
<body> 
    <br /><br /> 
    <h2>.</h2> 
    <div id="space"></div> 
    <table border="1"> 
     <thead> 
      <tr><th>Amount</th><th>label</th></tr> 
     </thead> 
     <tbody> 
      <tr><td>20</td><td>pineapple</td></tr> 
      <tr><td>20</td><td>pineapple</td></tr> 
      <tr><td>20</td><td>pineapple</td></tr> 
      <tr><td>20</td><td>pineapple</td></tr> 
      <tr><td>20</td><td>pineapple</td></tr> 
      <tr><td>20</td><td>pineapple</td></tr> 
      <tr><td>20</td><td>pineapple</td></tr> 
      <tr><td>20</td><td>pineapple</td></tr> 
      <tr><td>20</td><td>pineapple</td></tr> 
      <tr><td>20</td><td>pineapple</td></tr> 
      <tr><td>20</td><td>pineapple</td></tr> 
      <tr><td>20</td><td>pineapple</td></tr> 
      <tr><td>20</td><td>pineapple</td></tr> 
      <tr><td>20</td><td>pineapple</td></tr> 
     </tbody> 
    </table> 
</body> 
</html> 
+0

¿Qué es usted? trabaja en FF6. Si genera un pdf, asegúrese de que el zoom sea bueno y no se trate de un problema de representación de zoom ... –

+0

FF6. Si genero un pdf, se ve un poco mejor pero aún no es bueno: hay bordes izquierdo y superior, pero son más delgados que los otros bordes. –

Respuesta

5

cambiar su estilo de tabla para tener algo se ve bien:

table { 
    border: 1pt solid #000000; 
    border-collapse: separate; 
    border-spacing: 0; 
    font-size: 11pt; 
    width: 100%; 
    } 

Editar: tener algo parece perfecto, primer lugar, desconecte el borde de la tabla a continuación, definir cada estilo con lo que quieres, con el fin de tener una sola línea de frontera (frontera crear para el th, td, tr):

table { 
     border-collapse: separate; 
     border : 0px solid #000000; 
    border-spacing: 0; 
    font-size: 11pt; 
    width: 100%; 
    border-color: #000000 ; 
    border-right: 1px solid; 

} 
tr { 
    border-color: #000000 ; 
    border-style: none ; 
    border-width: 0 ; 
} 
td { 
    border-color: #000000 ; 
    border-left: 1px solid; 
    border-bottom:1px solid ; 
} 

th { 
    border-color: #000000 ; 
    border-left: 1px solid; 
    border-top:1px solid ; 
    border-bottom:1px solid ; 
} 
+0

Se ve mejor, pero aún no es bueno. El borde inferior de la primera página y el borde superior de la segunda página son solo la mitad del grosor que los bordes restantes. –

+0

Esto es normal. Pero nueva solución "perfecta" en la edición. –

+0

Si configuro explícitamente 'none' todos los bordes que no son necesarios, funciona. –

0

Dale margen de la tabl e, el ancho del borde de la mesa para evitar el recorte en la segunda y las páginas posteriores cuando la tabla tiene un borde colapsado.

<table style="border:1px solid black; margin:1px;"> 
    <thead> 
     <tr><th>Amount</th><th>label</th></tr> 
    </thead> 
    ....