使用CSS布局打印具有许多列/行的HTML表格？ [英] Printing HTML table with many columns/rows using CSS layout?
问题描述
我想从HTML中打印一张大表（大到表格宽度大约为3页）。如果可能，CSS应该足够布局，解决方案应该与不同的浏览器。
我目前正在定义以下样式规则：
table {page-break-inside：auto; }
tr {page-break-inside：auto; }
当我检查DOM元素在Firefox 33.0.2（在OS X上）我可以看到规则被识别，但是当我看一个打印预览（文件 | 打印 PDF | 在预览中打开PDF ）所有不适合第一页的列被截断，即我收到1页的打印输出，而不是3。 Explorer 11和10也有相同的效果。
那么如何使用CSS打印大型HTML表格（最终列大小都是行） / p>
奖金问题：如果分页样式组件确实只适用于块级元素，如 this previous answer，如果我从 div s而不是 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：
code> table {page-break-inside：auto; }
td {border：1px solid lightgray; }
tr {page-break-inside：auto; }
如果我尝试打印此表格在Firefox 33.1 for OS中打开框架打印框架 | X和纸张尺寸/方向A4 /纵向）我得到一页输出。
你绝对需要离开表格，如果你需要可读的垂直打印页面。表非常适合在页面上显示（表格数据），但不是可行的打印解决方案，因为它们不尊重流程。
有插件（如这里，没有关联 - 只是一个Google结果< a>）会自动为你做，但这里是例子。当您使用此，请确保 @media打印被正确列出。要在本地测试，可以将其更改为 @media screen 。
希望这有助于：
$ b $ b纵向打印的小提琴
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英寸，以便旋转时它会出现在页面的顶部。我们把它的计算高度滑动，这样当旋转发生时，我们在表的左边没有一个丑陋的缺口。
然后，我们指示我们希望所有这些计算都与文档流程中元素的正常位置的左下角相关。这可以通过设置 left 属性来防止这个疯狂的长表被向右旋转。 底部属性很重要，因为我们将它顺时针旋转四分之一圈，如果我们从顶部执行，它将离开页面的左侧。这个四分之一转在 transform 语句的下一部分中描述： rotate（90deg）;
Voila。
：：没有办法阻止该网页。打破了我所知道的元素。更新Firefox已确认正在工作：
I want to print a large table (so large that its rows are approx. 3 sheets of papers wide) from HTML. If possible, CSS should suffice for layout and the solution should work with different browsers.
I'm currently defining the following style rules:
table { page-break-inside:auto; }
tr { page-break-inside:auto; }
When I inspect the DOM elements e.g. in Firefox 33.0.2 (on OS X) I can see that the rules are recognized, but then when I look at a print preview ( File | Print | PDF | Open PDF in Preview) all columns that don't fit on the first page are cut off, i.e. I receive 1 page of printed output instead of 3. I have also tried Internet Explorer 11 and 10 to the same effect.
So how can I layout large HTML tables (ultimately large both in terms of columns an rows) for print out using CSS?
Bonus question: If page-break style components indeed only apply to block-level elements as is indicated in this previous answer, would it help if I construct my table from divs instead of tds when aiming for print output?
UPDATE
Here is a relevant sample that I just tried on JSFiddle. (I don't have an account there, so FWIK I cannot provide a direct link.)
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; }
If I try to print this table (e.g. by applying This Frame | Print Frame ... | PDF | Open PDF in Preview to JSFiddle's Result view in Firefox 33.1 for OS X and for Paper Size/Orientation A4/Portrait) I get one page of output. All columns but the first and part of the second are cut off.
You absolutely need to move away from a table if you need readable vertical printing on the page. Tables are great for display on the page when it's tabular data but are not a viable solution for printing as they don't respect flow.
There are plugins (like this one here, no affiliation – just a Google result) that will do this automatically for you, but here's the example. When you use this, make sure that the @media print is listed appropriately. To test locally, you can change that to @media screen.
That won't show the @page rules listed, but those are visible via a print preview.
Hope this helps:
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;
}
Edit - Printing horizontally across several pages:
Okay, so this is probably a far less common use case, and we have to do some goofy things with it – so fair warning. I'll try to explain this step-by-step as it's cryptic and obnoxious.
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;
}
}
This is the part that matters, as it's setting your print directives. Most of this is stuff we've seen in the original (with some tweaks as I was playing with it).
The part we care about comes here:
.table {
transform: translate(8.5in, -100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
What we're doing is flopping the whole thing on its side, and then sliding it to where we expect it to be. translate(8.5in, -100%) is telling the browser – Slide this element 8.5 inches (the width of a standard letter paper in the US) to the right, and then slide it up 100% of its height (the negative indicates up as opposed to down). We slide it to the right 8.5 inches so that it'll appear at the top of the page when rotated. We slide it up its calculated height so that we don't have an ugly gap to the left of the table when the rotation happens either.
Then, we instruct it that we want all of those calculations run in relation to the bottom left of the element's normal position in document flow. This keeps this crazy long table from being rotated way off to the right by setting the left property. The bottom property is important because we're rotating it clockwise a quarter turn, and if we did that from the top, it would be off the page to the left. That quarter turn is described in the next part of the transform statement: rotate(90deg);
Voila. The thing prints across multiple pages.
Before you ask: No. There is no way to prevent the page break inside the element of which I'm aware. I know it's obnoxious, ugly and all that garbage, but we can only work with the tools which we're given.
Update Firefox confirmed working:
这篇关于使用CSS布局打印具有许多列/行的HTML表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
