改ページが機能しない

Question

私は、各行に複数の行と罫線があるテーブルを持っています。 jqueryプラグインprint.jsの助けを借りてページを印刷するオプションがあります。印刷しようとすると、<tr>が壊れています。ある部分は1ページにあり、残りは次のページにあります。

<div id="printable_allagenda" style="display: none;" ></div> 

jqueryの：私はこのスタイルで表table.gridtableのプロパティを与えて試してみました

@media print { 
body{ 
    max-width:99%; 
    page-break-before: avoid; 
} 
    #printable_allagenda{ 
     font-size: 12px; 
    } 
     table.gridtable { 
     font-family: verdana,arial,sans-serif; 
     font-size:11px; 
     color:#333333; 
     border-width: 1px; 
     border-color: #666666; 
     border-collapse: collapse; 
    } 
    table.gridtable th { 
     border-width: 1px; 
     padding: 8px; 
     border-style: solid; 
     border-color: #666666; 
     background-color: #dedede; 
    } 
    table.gridtable td { 
     border-width: 1px; 
     padding: 8px; 
     border-style: solid; 
     border-color: #666666; 
     background-color: #ffffff; 
    } 
    @page { 
    margin: 0.5cm; 
    } 
} 
table.gridtable { 
    font-family: verdana,arial,sans-serif; 
    font-size:11px; 
    color:#333333; 
    border-width: 1px; 
    border-color: #666666; 
    border-collapse: collapse; 
} 
table.gridtable th { 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #666666; 
    background-color: #dedede; 
} 
table.gridtable td { 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #666666; 
    background-color: #ffffff; 
} 
.fadedyes{ 
    position: absolute;top:0;left:0;width: 100%;height:100%;z-index:2;opacity:0.4;filter: alpha(opacity = 50); 
} 

：

$("#print_agenda").click(function(){ 

     $.ajax({ 
      type: "POST", 
      url: "module/parents/calendar/print_loader_tableview.php", 
      data: data_values, 
      success: function(msg){ 
       $('#printable_allagenda').html(msg); 
       $('#printable_allagenda').print(); 
      } 
     }); 
     return false; 
    }); 

CSSを印刷するためのイベントをクリックしますpage-break-inside: avoid;
またtable.gridtable trのスタイルを使用スタイル：page-break-inside:avoid; page-break-after:autoで動作していますが、動作しません。

私はスクリーンショットを添付しました。

Answer 1

使用float:noneまたはdisplay:block親要素のためとpage-break-before:always