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

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

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

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

Вот мой код:

pagination.php

 


    
    
    
        
    
    



    

      

        
header
        
      
    

    

      

        

       content
        
      
    

    

      

        
footer
        
      
    

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 снова не понимает. Он не повторяет верхний и нижний колонтитулы на каждой странице в режиме печати.

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

   
Your header goes here
   
Your footer goes here
   

     

     Page body in here -- as long as it needs to be
     
   

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