Seitenumbruch funktioniert nicht

Question

Ich habe eine Tabelle mit mehreren Zeilen und Rahmen für jede Zeile. Ich habe eine Option, um die Seite mit Hilfe eines jquery-Plugins print.js zu drucken. Wenn ich versuche zu drucken, bricht die <tr>. Ein Teil ist auf einer Seite, der Rest ist auf dem nächsten.

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

JQuery: Ereignis Klicken zum Drucken

$("#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:

@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); 
} 

Ich habe versucht, Eigenschaften für die Tabelle table.gridtable mit diesem Stil zu geben: page-break-inside: avoid;
Auch verwendet Stil für table.gridtable tr mit Stil: page-break-inside:avoid; page-break-after:auto, aber es funktioniert nicht.

Ich habe einen Screenshot beigefügt.

Answer 1

Verwenden float:none oder display:block für übergeordnete Elemente und machen page-break-before:always