Html 打印模板（帶頁眉頁腳）

<!DOCTYPE html>
<html>

<head>
    <link  rel="stylesheet" />
    <style>
        
.page-header, .page-header-space {
  height: 80px;
}

.page-footer, .page-footer-space {
  height: auto;

}

.page-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid black; /* for demo */
  background: yellow; /* for demo */
}

.page-header {
  position: fixed;
  top: 0mm;
  width: 100%;
/*  border-bottom: 1px solid black;  for demo */
  background: yellow; /* for demo */
}

.page {
  page-break-after: always;
}

@page {
/*  margin: 20mm*/
    margin-top: 0.25in;
}

@media print {
   thead {display: table-header-group;} 
   tfoot {display: table-footer-group;}
   body {margin: 0;}
}
</style>
</head>

<body>

  <div class="page-header" style="text-align: center">
    I'm The Header
  </div>

<!--
  <div class="page-footer">
    I'm The Footer
  </div>
-->

  <table>

    <thead>
      <tr>
        <td>
          <div class="page-header-space"></div>
        </td>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>
            <!-- 內(nèi)容一定要在 td 內(nèi) -->
            <!-- 內(nèi)容區(qū) -->
            
            <table class="table-bordered w-100 d-print-table">
                    <thead>
                      <tr><td>Header</td><td>Header</td><td>Header</td><td>Header</td><td>Header</td></tr>
                    </thead>
                
                    <tbody>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                        <tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
                </tbody>
            </table>
          
          <!--*** CONTENT GOES HERE ***-->
          <div class="page">PAGE 1</div>
          <div class="page">PAGE 2</div>
          <div class="page" style="line-height: 3;">
            PAGE 3 - Long Content
            <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
            mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
            pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
            suscipit venenatis. Donec rhoncus sceler
          </div>

        <!-- ./ end 內(nèi)容區(qū) -->

        </td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>
          <div class="page-footer-space"></div>
        </td>
      </tr>
    </tfoot>

  </table>

</body>

</html>
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末幢痘，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子桩了，更是在濱河造成了極大的恐慌湃缎，老刑警劉巖，帶你破解...
    沈念sama閱讀 219,589評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機隆檀，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評論 3贊 396
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來粹湃，“玉大人恐仑，你說我怎么就攤上這事∥” “怎么了菊霜？”我有些...
    開封第一講書人閱讀 165,933評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長济赎。 經(jīng)常有香客問我鉴逞，道長，這世上最難降的妖魔是什么司训？ 我笑而不...
    開封第一講書人閱讀 58,976評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任构捡，我火速辦了婚禮，結果婚禮上壳猜，老公的妹妹穿的比我還像新娘勾徽。我一直安慰自己，他們只是感情好统扳，可當我...
    茶點故事閱讀 67,999評論 6贊 393
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布喘帚。 她就那樣靜靜地躺著，像睡著了一般咒钟。 火紅的嫁衣襯著肌膚如雪吹由。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,775評論 1贊 307
  • 城市分裂傳說
    那天朱嘴，我揣著相機與錄音倾鲫，去河邊找鬼。 笑死萍嬉，一個胖子當著我的面吹牛乌昔，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播壤追，決...
    沈念sama閱讀 40,474評論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼磕道，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了行冰？” 一聲冷哼從身側響起溺蕉，我...
    開封第一講書人閱讀 39,359評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤贯卦，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后焙贷，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,854評論 1贊 317
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡贿堰，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,007評論 3贊 338
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年辙芍，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片羹与。...
    茶點故事閱讀 40,146評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡故硅，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出纵搁，到底是詐尸還是另有隱情吃衅，我是刑警寧澤，帶...
    沈念sama閱讀 35,826評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布腾誉，位于F島的核電站徘层，受9級特大地震影響，放射性物質發(fā)生泄漏利职。R本人自食惡果不足惜趣效，卻給世界環(huán)境...
    茶點故事閱讀 41,484評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望猪贪。 院中可真熱鬧跷敬，春花似錦、人聲如沸热押。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,029評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽桶癣。三九已至拥褂，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間牙寞，已是汗流浹背肿仑。 一陣腳步聲響...
    開封第一講書人閱讀 33,153評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留碎税，地道東北人尤慰。 一個月前我還...
    沈念sama閱讀 48,420評論 3贊 373
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像雷蹂，于是被迫代替她去往敵國和親伟端。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 45,107評論 2贊 356

推薦閱讀更多精彩內(nèi)容