jquery - 分页符不起作用

Question

我有一个包含多行和每行边框的表格。我可以选择在 jquery 插件的帮助下打印页面 print.js .当我尝试打印时，<tr>坏了。一部分在一页上，其余部分在下一页。

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

Jquery: 用于打印的点击事件

$("#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);
}   

我已经尝试为表 table.gridtable 提供属性这种风格: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