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>