我目前正在定义以下风格规则：
table { page-break-inside:auto; }
tr { page-break-inside:auto; }
当我检查DOM元素,例如在Firefox 33.0.2(在OS X上)我可以看到规则被识别,但是当我看到打印预览(文件|打印| PDF |打开PDF在预览中)所有不适合的列页面被切断,即我收到1页的打印输出,而不是3.我也尝试过Internet Explorer 11和10相同的效果.
那么,如何布局大型HTML表格(最终都是以列为单位排列),使用CSS打印出来？
奖金问题：如果页面中断样式组件确实仅适用于块级元素,如this以前的答案所示,如果在瞄准打印输出时从div而不是tds构造表,这有帮助吗？
UPDATE
这是我刚刚在JSFiddle上试过的一个相关示例. (我没有帐号,所以FWIK我不能提供直接的链接.)
HTML：
<body> <table> <tr> <td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</td> <td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</td> <td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</td> <td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</td> <td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</td> <td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</td> <td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</td> <td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</td> <td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</td> <td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</td> </tr> </table> </body>
CSS：
table { page-break-inside:auto; }
td { border:1px solid lightgray; }
tr { page-break-inside:auto; }
如果我尝试打印此表(例如通过应用此框架|打印框架… | PDF |在预览中打开PDF到Firefox 33.1中的JSFiddle的结果视图,用于OS X和纸张尺寸/方向A4 /纵向)我获得一页的输出.所有列,但第一部分和第二部分被切断.
解决方法
有些插件(如this one here,no affiliation – just a Google result)可以为您自动执行,但以下是示例.使用此功能时,请确保已经正确列出了@media打印.要在本地测试,您可以将其更改为@media屏幕.
这不会显示列出的@page规则,但通过打印预览可以看到.
希望这可以帮助：
Fiddle for printing in portrait
HTML
<section class="table">
<div class="row">
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</div>
</div>
</section>
CSS
@media print {
@page {
margin: 2.5cm;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.2cm;
}
div.row {
display: block;
}
}
.table {
display: table;
border-spacing: 2px;
}
.row {
display: table-row;
}
.row > div {
display: table-cell;
border: solid 1px #ccc;
padding: 2px;
}
编辑 – 横向打印多页：
好吧,这可能是一个不那么常见的用例,我们必须做一些愚蠢的事情 – 如此公正的警告.我会尝试解释这个一步一步,因为它是神秘和讨厌的.
Fiddle for printing in landscape here!
CSS
@media print {
@page {
margin: 0;
}
body {
height: 100%;
width: 100%;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.1cm;
font-size: 1rem;
}
div.row {
display: block;
margin: solid 2px black;
margin: 0.2cm 1cm;
font-size: 0;
white-space: nowrap;
}
.table {
transform: translate(8.5in,-100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
}
这是重要的部分,因为它是设置您的打印指令.大多数这是我们在原来看到的东西(有一些调整,因为我在玩它).
我们关心的部分来自于这里：
.table {
transform: translate(8.5in,-100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
我们正在做的是将整个事情摆脱在一边,然后将其滑到我们期望的地方.翻译(8.5in,-100％)告诉浏览器 – 将此元素向右滑动8.5英寸(美国标准信纸的宽度),然后将其向上滑动100％的高度(负数表示上升而不是下来).我们将其向右滑动8.5英寸,以便在旋转时出现在页面顶部.我们将其滑动到计算出的高度,这样当旋转也发生时,我们在表的左边没有一个丑陋的差距.
然后,我们指示,我们希望所有这些计算都运行在文档流中元素正常位置的左下角.这使得这个疯狂的长桌子通过设置左边的属性来旋转到右边.底部的属性很重要,因为我们顺时针旋转四分之一圈,如果我们从顶部做到这一点,它将离开页面左侧.转换语句的下一部分描述了四分之一转：rotate(90deg);
瞧.事情打印在多个页面.
在你问之前：没有.没有办法阻止我所知道的内容中的分页符.我知道这很讨厌,丑陋和一切垃圾,但是我们只能使用我们给予的工具.
更新Firefox确认工作：
