2012-01-18 21 views
6

Yazdırma modunda her sayfaya üstbilgi ve altbilgi eklemek istiyorum. Bunun hakkında birçok araştırma yaptım.Özel üstbilgi ve altbilgi html sayfası

İki çözüm buluyorum. Ama onlar çapraz tarayıcı değil (IE, Firefox ve Chrome'da çalışmasını istiyorum)

İlk çözüm: İçerik tablomun üstüne ve altına kenar boşlukları ayarlıyorum. Sonra bu pozisyona sabit pozisyonda üstbilgi ve altbilgi yazarım. Firefox'ta mükemmel çalışıyor. Ancak IE ve Chrome'da kenar boşlukları ayarlanmaz. Ayrıca, Chrome'da her sayfaya üstbilgi ve altbilgi yazmaz. İşte

benim kodudur:

pagination.php

<!DOCTYPE HTL> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"> 
    <meta name="robots" content="noindex, nofollow"> 
    <meta name="googlebot" content="noindex"> 
    <meta http-equiv="cache-control" content="no-cache">  
    <title>Brove.NET ISO Yazılımı</title> 
    <link rel="stylesheet" type="text/css" href="css/pagination.css" /> 
</head> 

<body> 
    <table class="header" cellpadding="0" cellspacing="0"> 
     <tr> 
     <td>header 
     </td> 
     </tr> 
    </table> 

    <table class="content" cellpadding="0" cellspacing="0"> 
     <tr> 
     <td valign="top"> 
     content 
     </td> 
     </tr> 
    </table> 

    <table class="footer" cellpadding="0" cellspacing="0"> 
     <tr> 
     <td>footer 
     </td> 
     </tr> 
    </table> 

</body> 
</html> 

pagination.css

@media screen{ 
    .header{ 
     width:768px; 
     height:100px; 
     border:2px solid #000; 
    } 

    .content{ 
     width:768px; 
     margin-top:10px; 
     margin-bottom:10px; 
     height:1000px; 
    } 

    .footer{ 
     width:768px; 
     height:100px; 
     border:2px solid #000; 
    } 
} 

@media print {  
    .header{ 
     position:fixed; 
     top:0; 
     left:0; 
     width:768px; 
     height:100px; 
     border:2px solid #000; 
    } 

    .content{ 
     width:768px; 
     margin-top:120px; 
     margin-bottom:120px; 
     height:1000px; 
    } 

    .footer{ 
     position:fixed; 
     left:0; 
     bottom:0; 
     width:768px; 
     height:100px; 
     border:2px solid #000; 
    } 

    @page{ 
     margin-bottom:150px; 
    } 
} 

Ve bu ikinci çözümdür: table-header-group kullanarak bu çözüm im olarak

ve table-footer-group öznitelikleri. Firefox ve IE çalışır. Ancak Chrome bir daha anlamıyor. Baskı modunda her sayfada üstbilgi ve altbilgi yinelenmez. Is there a way to get a web page header/footer printed on every page?

<style type="text/css"> 
    thead { display: table-header-group; } 
    tfoot { display: table-footer-group; } 
</style> 

<body> 
<table> 
    <thead><tr><td>Your header goes here</td></tr></thead> 
    <tfoot><tr><td>Your footer goes here</td></tr></tfoot> 
    <tbody> 
    <tr><td> 
    Page body in here -- as long as it needs to be 
    </td></tr> 
    </tbody> 
</table> 
</body> 

bu tarayıcı sorunları çözmek için ya da bana herhangi bir öneri var mı herhangi kesmek var mı: İşte

başka kodudur?

+0

Hayır. Bir PDF dosyası derleyin ve bunu yazıcı yöneticisine iletin veya varsayılan davranışla yaşıyorsunuz. – MetalFrog

+0

Ayrıca pdf oluşturuyorum ama çok yavaş. Bu yüzden html –

+0

ile kullanmak istiyorum 've' 'Chrome'da çalışmadı mı? –

cevap

0

Sayfanızı herhangi bir tablo etiketinden ziyade div etiketinde oluşturmaya çalışın! div tablodan daha hafiftir tablo

<div id='header' style='height:230px'> 
</div> 

<div id='body'></div> 

<div id='footer' style='height:230px'> 
</div> 

Teşekkür ederiz! een api ve özel üstbilgi ve altbilgi gibi birçok seçenek vardır bu web sitesinde Bence de

+0

Ben pozisyon ile danışmanlık değilim! Mümkün ise mutlak kullanmayı deneyin :) – Chintan

+1

sorumu anla. Her sayfa için baskı modunda yapmak istiyorum –

0

baskı için harika çalışır: Benim durumumda

http://pdfmyurl.com

hız mükemmel olduğunu ve hiçbir şey değişmez düzende.

İki çözüm (çok çalışma): Tüm öğeler üzerinde mutlak konumlandırma kullanın.

İlgili konular