Пользовательский верхний и нижний колонтитулы на HTML-странице - PullRequest
Новая
       36

Пользовательский верхний и нижний колонтитулы на HTML-странице

7 голосов
/ 18 января 2012

Я хочу поместить верхний и нижний колонтитулы на каждой странице в режиме печати. Я провел много исследований об этом.

Я нашел два решения. Но они не кросс-браузерные (я хочу, чтобы он работал в IE, Firefox и Chrome)

Первое решение: я устанавливаю поля сверху и снизу для своей таблицы содержимого. Затем я пишу верхний и нижний колонтитулы в это пространство с фиксированной позиции. Он отлично работает в Firefox. Но в IE и Chrome он не устанавливает поля. Также в Chrome он не пишет верхний и нижний колонтитулы для каждой страницы.

Вот мой код:

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;
    }
}

И это второе решение:

В этом решении я использую атрибуты table-header-group и table-footer-group. Работает Firefox и IE. Но Chrome снова не понимает. Он не повторяет верхний и нижний колонтитулы на каждой странице в режиме печати. ​​

Вот еще один код: Есть ли способ напечатать верхний / нижний колонтитул веб-страницы на каждой странице? 

<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>

Есть какой-нибудь хак для решения проблем этого браузера или у вас есть какие-либо предложения для меня?

Ответы [ 2 ]

0 голосов
/ 20 июля 2014

По моему мнению, этот веб-сайт с een api и множеством опций, таких как настраиваемый верхний и нижний колонтитулы, отлично подходит для печати:

http://pdfmyurl.com

В моем случае скорость отличная, иничего не меняет в макете.

Решение второе (много работы): использовать абсолютное позиционирование для всех элементов.

0 голосов
/ 21 января 2012

Попробуйте создать свою страницу в теге div, а не в любом теге таблицы!div более легкий, чем таблица 

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

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

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

Спасибо!

...