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;

}

巴特西

jqprint导入jqgrid表格时，内容溢出的原因以及解决方法

最新文章

热门文章