eu tenho uma página HTML que funciona como página de relatório. Ela tem uma tabela que é alimentada pelo banco de dados, entretanto quando existem muitas linhas na consulta então a tabela HTML fica muito grande. Acontece que devido a isto, se eu tentar imprimir a página, a ultima linha da tabela no final da página vai ser "comida" pela divisão do papel. Gostaria dentão de permitir que o javascript se encarregue de criar linhas vazia a cada intervalo de altura da tabela. Por exemplo, eu poderia especificar que a cada 500 pixels de altura na tabela, o javascript deveria inserir uma linha vazia. Porém, não sei como implantar isto. Alguma sugestão? Tentativas... <html> <head> <script src="jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ var altura = 0; $('#tabela tr').each(function(index, element){ altura += $(this).height(); if (altura > 100) { $(this).style.pageBreakBefore="always"; altura = 0; } }); }); </script> <style> @media print { tr.page-break { display: block; page-break-before: always; } } </style> </head> <body> <table id='tabela' border=1px;> <tr><td>Linha1</td></tr> <tr><td>Linha2</td></tr> <tr class='page-break'><td>Linha3</td></tr> <tr><td>Linha4</td></tr> <tr><td>Linha5</td></tr> <tr><td>Linha6</td></tr> <tr><td>Linha7</td></tr> <tr><td>Linha8</td></tr> <tr><td>Linha9</td></tr> <tr><td>Linha10</td></tr> <tr><td>Linha11</td></tr> <tr><td>Linha12</td></tr> <tr><td>Linha13</td></tr> <tr><td>Linha14</td></tr> <tr><td>Linha15</td></tr> <tr><td>Linha16</td></tr> <tr><td>Linha17</td></tr> <tr><td>Linha18</td></tr> <tr><td>Linha19</td></tr> <tr><td>Linha20</td></tr> <tr><td>Linha21</td></tr> <tr><td>Linha22</td></tr> <tr><td>Linha23</td></tr> <tr><td>Linha24</td></tr> <tr><td>Linha25</td></tr> <tr><td>Linha26</td></tr> <tr><td>Linha27</td></tr> <tr><td>Linha28</td></tr> <tr><td>Linha29</td></tr> <tr><td>Linha30</td></tr> <tr><td>Linha31</td></tr> <tr><td>Linha32</td></tr> <tr><td>Linha33</td></tr> <tr><td>Linha34</td></tr> <tr><td>Linha35</td></tr> <tr><td>Linha36</td></tr> <tr><td>Linha37</td></tr> </table> </body> </html> E... <html> <head> <script src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('td').click(function () { var indice = $(this).index() + 1; $('tr').each(function (index, element) { $(this).children('td:nth-child(' + indice + ')').toggleClass('no-print'); }); }); var altura = 0; $('#tabela tr').each(function(index, element){ altura += $(this).height(); if (altura > 100) { $('<tr><td colspan="' + $(this).children('td').size() + '"><span class="no-print">quebra de pagina</span></td></tr>').insertBefore($(this)); altura = 0; } }); }); </script> <style> .no-print { opacity:.5; } @media print { .no-print { display:none; } } </style> </head> <body> <table id="tabela"> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> <tr> <td>Coluna 1</td> <td>Coluna 2</td> <td>Coluna 3</td> <td class="no-print">Coluna 4</td> </tr> </table> </body> </html>