使用CSS布局打印包含许多列/行的HTML表格？
Dru*_*rux 23 html css printing layout internet-explorer-10
我想从HTML打印一个大表(大到大约3张纸宽).如果可能,CSS应该足够布局,解决方案应该适用于不同的浏览器.
我目前正在定义以下样式规则:
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相同的效果.
那么如何使用CSS布局大型HTML表格(最终在列数方面都很大)？
奖金的问题:如果分页式的部件确实只适用于在指示块级元素此之前的回答,如果我从我的构建表将帮助它divs,而不是td小号瞄准打印输出时？
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 for OS X中的JSFiddle 结果视图和纸张尺寸/方向A4 /纵向)我得到一页输出 除第一部分和第二部分之外的所有列都被截断.
Jos*_*ess 24
如果您需要在页面上进行可读垂直打印,则绝对需要离开桌子.表格非常适合在表格数据上显示在页面上,但由于它们不尊重流程,因此不适合打印.
有插件(就像这里的这个,没有联盟 - 只是谷歌的结果)会自动为你做这个,但这是一个例子.使用此功能时,请确保@media print已正确列出.要在本地测试,您可以将其更改为@media screen.
这不会显示@page列出的规则,但通过打印预览可以看到这些规则.
希望这可以帮助:
用于在肖像中打印的小提琴
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;
}
编辑 - 跨多个页面水平打印:
好的,所以这可能是一个不太常见的用例,我们必须用它做一些愚蠢的事情 - 所以公平警告.我将逐步解释这一点,因为它是神秘而令人讨厌的.
在这里打印风景小提琴!
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英寸,以便在旋转时它出现在页面顶部.我们将其向上滑动其计算高度,以便在旋转发生时我们在桌子左侧没有难看的间隙.
然后,我们指示我们希望所有这些计算都与bottom left文档流中元素的正常位置相关.这使得这个疯狂的长桌不会通过设置left属性而向右旋转.该bottom属性很重要,因为我们顺时针旋转四分之一圈,如果我们从顶部旋转它,它将离开页面左侧.这季又在下一部分中描述transform语句:rotate(90deg);
瞧.东西打印在多个页面上.
在你问之前:不.没有办法阻止我知道的元素内的分页.我知道这是令人讨厌,丑陋和所有垃圾,但我们只能使用我们给出的工具.
更新Firefox确认工作: 
page-break-inside: auto; 是默认样式,因此除非您的规则设置不同,否则这些规则将不执行任何操作.
如果你的表没有被分成多个页面,那么很可能是因为你添加了一些其他规则,这会阻止它 - 我的猜测overflow: hidden.
您首先要做的是删除所有样式,并查看是否在多个页面上打印.如果是,请开始添加样式(按规则排序,或者必要时逐行添加)以查找问题.
- 这根本不回答这个问题. (2认同)