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>