我想从 HTML 打印一个大表格(大到它的行大约有 3 张纸宽)。如果可能，CSS 应该足以满足布局需求，并且该解决方案应该适用于不同的浏览器。
我目前正在定义以下样式规则:
table { page-break-inside:auto; }
tr { page-break-inside:auto; }
当我检查 DOM 元素时，例如在 Firefox 33.0.2(在 OS X 上)我可以看到规则被识别，但是当我查看打印预览时(File | Print | PDF | 在预览中打开 PDF)所有不适合第一页的列都被截断，即我收到 1 页打印输出而不是 3 页。我也尝试过互联网Explorer 11 和 10 效果相同。
那么我如何布置大型 HTML 表格(最终在列和行方面都很大)以便使用 CSS 打印出来？
奖励问题:如果分页样式组件确实只适用于 block 级元素，如 this 中所示以前的答案，如果我在打印输出时从 div 而不是 td 构建我的表会有帮助吗？
更新
这是我刚刚在 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; }
如果我尝试打印此表(例如，通过应用 This Frame | Print Frame ... | PDF | Open预览中的 PDF 到 Firefox 33.1 中 OS X 和纸张大小/方向 A4/纵向的 JSFiddle 结果 View )我得到一页输出。除第一列和第二列的一部分外，所有列都被截断。
最佳答案
如果您需要在页面上进行可读的垂直打印，您绝对需要远离表格。 当它是表格数据时，表格非常适合在页面上显示，但不是一种可行的打印解决方案，因为它们不符合流程。
有些插件(如 this one here, no affiliation – just a Google result )会自动为您执行此操作，但这里是示例。当您使用它时，请确保 @media print 被正确列出。要在本地进行测试，您可以将其更改为 @media screen。
这不会显示列出的 @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;
}
我们正在做的是将整个事物翻转到一边，然后将其滑动到我们期望的位置。 translate(8.5in, -100%) 告诉浏览器——将这个元素向右滑动 8.5 英寸(美国标准信纸的宽度)，然后向上滑动 100%它的高度(负数表示向上而不是向下)。我们将它向右滑动 8.5 英寸，以便在旋转时它会出现在页面顶部。我们将它向上滑动到它的计算高度，这样当旋转发生时，我们就不会在 table 的左边出现难看的间隙。
然后，我们指示它我们希望所有这些计算都相对于元素在文档流中的正常位置的 bottom left 运行。通过设置 left 属性，可以防止这个疯狂的长表向右旋转。 bottom 属性很重要，因为我们将它顺时针旋转四分之一圈，如果我们从顶部旋转它，它就会离开页面左侧。该四分之一转在 transform 语句的下一部分中描述:rotate(90deg);
瞧。这个东西打印在多个页面上。
在你提问之前:没有。没有办法阻止我所知道的元素内的分页符。我知道它令人讨厌、丑陋和所有这些垃圾，但我们只能使用我们提供的工具。
更新 Firefox 确认工作:
关于html - 使用 CSS 布局打印包含许多列/行的 HTML 表格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26777317/