html - css - print page - header repeat not working

Question

why Header1 and Header2 not exists in all page in print landscape

https://fiddle.jshell.net/6mvucked/

seems height header is limit. if more than a value to be not show in all page

why ?

ٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍ

Answer 1

Your javascript will append 100 rows to only those containers whose id is "test". So if you want the same to happen with the tbody of header, then simply write

    <tbody id="test">

in the one in the header. But in that case, it will only print 100 rows for the header tbody and not the other second tbody, as Javascript will append 100 rows to the 1st tag with id="test".

So if you need to append 100 or x number of rows to both or many tbody, then give them separate ids and hence write separate functions for them in javascript. Like this:

    <table>
        <teahd>
            <tr>
                <td>ok , no problem, but show only in first page and not repeat</td>
                <td>
                <table>
                   <tbody id="test-one">
                      <tr><td>header not be shown if this code(table) here</td></tr>
                   </tbody>
                </table>
                </td>
             </tr>
          </teahd>
          <tbody id="test-two">

          </tbody>
          <tfoot>
              <tr>
                 <td>no problem</td>
              </tr>
           </tfoot>
        </table>

And the javascript functions like:

    for(var i=1;i<=100; i++) 
        $('#test-one').append('<tr><td colspan="2">row '+i+'</td></tr>');
        $('#test-two').append('<tr><td colspan="2">row '+i+'</td></tr>');