如何让这个表不被 jQuery 打破？答案

【问题标题】：How to make this table don't be break by jQuery?如何让这个表不被 jQuery 打破？
【发布时间】：2015-10-22 08:33:25
【问题描述】：

我使用 jQuery 打印数据表，它显示如下。如何使表格显示完整？

这是我的打印 jquery

$(document).ready(function () {
    $("#Print_This").live("click", function () {
        //            $("#SCROLLBAR").printArea();
        var content = $("#SCROLLBAR").html();
        var docprint = window.open("SingTao", "ContentAssignment", "");
        docprint.document.open();
        docprint.document.write(content);
        docprint.document.close();
        docprint.print();
        docprint.close();
    });
});

【问题讨论】：

标签： jquery printing

【解决方案1】：

我建议您将必要的 CSS 也放入新打开的窗口中，而不是简单地打印内容。在这里，您在 window 对象上调用 .print()。所以它与jQuery 一点关系都没有。请看下面的代码。参考它并相应地修改上面的代码，看看你打印了什么：

$(document).ready(function () {
    $("#Print_This").live("click", function () {
        var content = $("#SCROLLBAR").html();
        var docprint = window.open("SingTao", "ContentAssignment", "");
        docprint.document.write('<html><head><title>my div</title>');
        docprint.document.write('<style type="text/css" media="print,screen">.someClass{border: 1px solid black}</style>');   //write all required css classes here OR put the link to CSS file as following line
        docprint.document.write('<link rel="stylesheet" href="http://some.domain.com/somefolder/somestyle.css" type="text/css" />');    //CSS present on some domain    
        docprint.document.write('</head><body>');
        docprint.document.write(content); //your contents goes here                
        docprint.document.write('</body></html>'); 
        docprint.document.close();
        docprint.print();
    });
});

在上面的代码中你可以看到； CSS 可以通过 2 种方式添加，您可以编写 <style> 标签，或者您可以使用 <link> 标签来引用某个域/服务器上存在的 .css 文件。请尝试一下，然后告诉我你看到了什么。

【讨论】：

“内容”是一个有很多行的表格，每一行都有不同的高度。如果某一行不能完全显示在一个页面中，它会分成两部分，就像那张图片一样。所以，我想控制这个表格的分页。
在打印时用户可以选择比默认页面更小的页面。因此，更高的行将再次分布在一页以上。这是您无法通过代码控制的，因为我们可以简单地调用print()；之后我们就无法控制打印机制了。