如何在应用css分页符属性时减少差距

Question

我正在创建一个包含数百行的大表。现在，当我尝试在谷歌浏览器中打印这个，然后列溢出没有标题。所以我创建了一些jquery和css样式来避免这种情况..它工作正常，但是页面中断在两个页面之间留下了巨大的差距..如何避免这个问题..这里是我的代码

<style>
@media print { .not-display{ display: inline-grid; } .page-break{ display: block; page-break-after: always;  }  } 
@media screen{ .not-display{ display: none; } } 
</style>

<table class="table table-condensed" id="myTable">
<tr><td>col1</td><td>col2</td><td>col3</td></tr>
<!--- hundreds of rows----->
</table>

<script>
$(document).ready(function(){       
var rowCount = $('#myTable tr').length; 
var i;
for(i=20;i<rowCount;i=i+20){
$("#myTable tr:nth-child("+i+")").after('<tr class="page-break">
<td colspan="3"></td>
</tr>
<tr class="not-display">
<td>Account Code</td>
<td>Head Of Account</td>    
<td>Opening Debit Balance</td></tr>');  
}
});
</script>

这是我的截屏

Answer 1

我不确定这是否能解决您的问题，但它会解决另一个问题。在您当前的代码中，for loop将计算已插入的<tr>，因此它将不同步，并且总行数将大于rowCount，这是在{开始。也许试试这个：

$(document).ready(function(){       
  $('<tr class="page-break"><td colspan="3"></td></tr><tr class="not-display"><td>Account Code</td><td>Head Of Account</td><td>Opening Debit Balance</td></tr>').insertBefore($("#myTable tr:nth-child(21n)"));  
});

只需在每第20行之前插入分页符代码而不进行循环。

FIDDLE