打印第一頁後重復標題

好的，所以我做了大量的研究，找不到任何東西。這是我的。我需要創建一個打印按鈕，並且打印視圖需要在第一頁後有重複標題。 AKA，第一頁的標題與其餘頁面不同。截至目前，這是我的，但它在每一頁上重複，我不能自定義首頁頁眉。任何幫助將不勝感激！打印第一頁後重復標題

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     .section { 
     display: table; 
     width: 100%; 
     } 
     .section > div { 
     display: table-cell; 
     overflow: hidden; 
     } 
     .section ~ .section > div:before { 
     content: ""; 
     display: block; 
     margin-bottom: -2.5em; /* inverse of header height */ 
     } 
     .section > div > div { 
     page-break-inside: avoid; 
     display: inline-block; 
     width: 100%; 
     vertical-align: top; 
     } 
     .header { 
     height: 2.5em; /* header must have a fixed height */ 
     } 
     .content { /* this rule set just adds space between sections and is not required */ 
     margin-bottom: 1.25em; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="section"> 
     <div> 
     <div> 
      <div class="header"> 
      PAGE HEADER 
      </div> 
      <div class="content"> 
      Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/> 
      Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section. 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div> 
     <div> 
      <div class="header"> 
      PAGE HEADER 
      </div> 
      <div class="content"> 
      Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section. 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div> 
     <div> 
      <div class="header"> 
      PAGE HEADER 
      </div> 
      <div class="content"> 
      Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section. 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div> 
     <div> 
      <div class="header"> 
      PAGE HEADER 
      </div> 
      <div class="content"> 
      Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/> 
      Unbreakable section. 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div> 
     <div> 
      <div class="header"> 
      PAGE HEADER 
      </div> 
      <div class="content"> 
      Unbreakable section.<br/>Unbreakable section. 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div> 
     <div> 
      <div class="header"> 
      PAGE HEADER 
      </div> 
      <div class="content"> 
      Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/> 
      Unbreakable section.<br/>Unbreakable section. 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div> 
     <div> 
      <div class="header"> 
      PAGE HEADER 
      </div> 
      <div class="content"> 
      Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/> 
      Unbreakable section. 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div> 
     <div> 
      <div class="header"> 
      PAGE HEADER 
      </div> 
      <div class="content"> 
      Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section. 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div> 
     <div> 
      <div class="header"> 
      PAGE HEADER 
      </div> 
      <div class="content"> 
      Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section. 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div> 
     <div> 
      <div class="header"> 
      PAGE HEADER 
      </div> 
      <div class="content"> 
      Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/> 
      Unbreakable section. 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div> 
     <div> 
      <div class="header"> 
      PAGE HEADER 
      </div> 
      <div class="content"> 
      Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/> 
      Unbreakable section. 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div> 
     <div> 
      <div class="header"> 
      PAGE HEADER 
      </div> 
      <div class="content"> 
      Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section. 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div> 
     <div> 
      <div class="header"> 
      PAGE HEADER 
      </div> 
      <div class="content"> 
      Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/> 
      Unbreakable section.<br/>Unbreakable section. 
      </div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

來源

2014-10-22 Nick Mudgett

好的，另一個編輯。您應該可以使用body > .section > div:before和其他.section ~ .section > div:before的其他頁面標題覆蓋JUST第一個頁面標題。

小提琴更新。當我用chrome打印時，我在第一頁上看到'第一頁頁眉'，在下一頁的第一部分之前沒有任何部分。您在第一頁頁眉上放寬頁邊空白，所以您可能需要調整空格。

Fiddle

body > .section > div:before { 
    content: "First Page Header"; 
    display: block; 
    margin-bottom: -2.5em; 
} 

.section ~ .section > div:before { 
    content: ""; 
    display: block; 
    margin-bottom: -2.5em; /* inverse of header height */ 
}

來源

2014-10-22 04:21:30 cjspurgeon

這讓我有點接近，但是它不打印這種方式。打印時，「頁眉」仍然出現在每頁的頂部。我希望在第二頁看到不同的東西。請讓我知道，如果我只是沒有看到它lol – 2014-10-23 01:42:09

啊，我明白你想要做什麼。我不認爲這是可能的只是改變CSS。我認爲你不能只爲第一頁標題添加標記？又名：http://jsfiddle.net/1hkzrL33/1/ – cjspurgeon 2014-10-23 16:17:47

好的，有沒有什麼辦法可以讓我在沒有CSS的情況下完成這個目標？ – 2014-10-24 11:11:03

打印第一頁後重復標題

回答

相關問題