如何在應用css分頁符屬性時減少間隙

-1

我正在創建一個包含數百行的大表。現在，當我試圖在谷歌瀏覽器中打印此列時，無列標題的列溢出。所以我創造一些jQuery和CSS樣式，以避免這種情況。它的工作不錯，但分頁符以兩個頁面之間的巨大差距。如何避免這個問題..這裏是我的代碼如何在應用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>

這裏是我的屏幕拍攝

enter image description here

來源

2015-02-11 Brett

請分享一些小提琴代碼。 – anji 2015-02-11 05:36:28

您是否在控制檯中檢查過哪些元素包含空間？ – sideroxylon 2015-02-11 08:54:20

我認爲這是與表的事實不是真正的塊級元素。我已經嘗試了下面的確切代碼（加上上面的CSS），並將所有表格元素更改爲div - 並且它完美地工作。 – sideroxylon 2015-02-11 12:27:33

我不知道這是否會解決您的問題，但它會解決不同的問題。在您當前的代碼中，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

來源

2015-02-11 06:14:25 sideroxylon

沒有人仍然出現差距... – Brett 2015-02-11 08:39:34

我發現最好的解決辦法是結束表，並開始一個新的。將分頁符的控制權歸還給自然塊元素。根據瀏覽器（以及Chrome上的瀏覽器版本），您會得到與此間隙問題完全不同的結果。我還沒有找到一個解決方案，除了提到的 - 只是跳過整個表分頁的想法。 – Barry 2016-05-31 22:08:33

如何在應用css分頁符屬性時減少間隙

回答

相關問題