是否可以使用 CSS 更好地打印页面？ [复制]

Posted 2023-03-05

【中文标题】是否可以使用 CSS 更好地打印页面？ [复制]

【英文标题】：Is it possible to use CSS to print pages better? [duplicate]

【发布时间】：2013-11-17 22:25:35

【问题描述】：

我有一个非常简单的 html 页面，它只有一个垂直表格，可以将数据动态生成到其中。我遇到的问题是，当我想打印我的页面时，它会在我的 <tr> 之一中途切断，如下所示：

有没有办法使用 CSS，所以我可以以某种方式在页面底部结束 <tr>，然后在第二页开始下一个 <tr>？

我在网上搜索了解决方案，但一无所获。对于我所追求的东西，要清楚地搜索它并不容易。

希望有人可以帮助解决这个问题。

【问题讨论】：

coding.smashingmagazine.com/2011/11/24/…

【参考方案1】：

这是一个更可靠的 JQuery 解决方案：

$(document).ready(function () 
    $('table.splitForPrint').each(function(i, tabela)
        var per_page = 13;

        var pages = Math.ceil($('tbody tr').length / per_page);

        if (pages == 1)
            return;

        var ultimo = $(tabela);
        for(var p = 1; p <= pages; p++) 
            var copy = ultimo.clone();

            $('tbody tr', ultimo).each(function(i, tr)
                if (i >= per_page) 
                    $(tr).remove();
                
            );

            $('tbody tr', copy).each(function(i, tr)
                if (i < per_page) 
                    $(tr).remove();
                
            );

            if (p < pages)
                copy.insertAfter(ultimo);

            copy.css('page-break-before', 'always');

            ultimo = copy;
        
    );
);

https://code.google.com/p/wkhtmltopdf/issues/detail?id=168#c4

【参考方案2】：

使用类似的东西

tr 
    page-break-inside: avoid;

【讨论】：

...许多浏览器不支持。

@MrLister 你有这方面的文件吗？我找不到太多一致的文档，但从我读到的所有现代浏览器都支持它。我发现的唯一关于缺乏支持的抱怨可以追溯到 2010 年或更早。

@ExplosionPills 似乎没有做任何事情。我在 Chrome 30 上。

official W3C documentation 仍然说浏览器必须遵守根中块级元素的这些规则，但“也可以将这些属性应用于其他元素，例如，'table-row' 元素。”所以他们没有必须让它在表格行上工作以符合要求。在我的机器上，Chromium 和 Konqueror 没有。

一段（甚至一个句子）或两段解释对于将可能的正确答案变成一个很好的答案大有帮助。