jqprint導入jqgrid表格時,內容溢出的原因以及解決方法


jqprint在導入表格的時候,會將原表格的樣式全部拉過來,所以說原表格(如jqgrid的表格)的內容在有滾動條的時候,必須得將寬度設置為100%(等百分比的寬度),不能設置成固定寬度,不然表格內容會超出或者小於打印紙的寬度!!

如這樣設置:

#gbox_grid-table{width:100% !important;}
    .ui-jqgrid-view{width:100% !important;}
    .ui-jqgrid-hdiv{width:100% !important;}
    .ui-jqgrid-bdiv{width:100% !important;}
    .ui-jqgrid-hbox{padding:0 !important;}

在打印的樣式中可以加樣式修改代入過來的表格樣式(th,td必須設置寬度,jqgrid的列寬度可以設置,也可以不設置)

@media print {
    /* 頁邊距 */
    @page {margin:.5cm;}
    * {background:transparent !important; color:#333 !important; box-shadow:none !important; text-shadow:none !important; filter:0 !important; -ms-filter:0 !important;}
    thead {display: table-row-group;}/*table-header-group導致頁面中出現表頭與內容重疊的現象,表頭只需在第一頁顯示即可*/
    tr,td,img {page-break-inside:avoid;}
    h2,h3 {page-break-after:avoid;}
    p,h2,h3 {orphans:3; widows:3;}
    table{width:100% !important;padding:0 !important;margin:0;border-color:#333 !important}
    table th{width:0px !important;border:1px solid #333 !important;white-space:normal !important;word-break:break-all !important}
    table td{width:0px !important;white-space: normal !important;word-break:break-all;padding:0 10px;border-color:#333 !important}
    /* 打印不要出現滾動條 */
    .ui-jqgrid .ui-jqgrid-bdiv,
    .ui-jqgrid .ui-jqgrid-bdiv>div{
        height: auto !important;
        width: 100% !important;
        
}

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM