大佬教程收集整理的这篇文章主要介绍了使用CSS布局打印具有许多列/行的HTML表格？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我目前正在定义以下风格规则：
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构造表,这有帮助吗？
这是我刚刚在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确认工作：
以上是大佬教程为你收集整理的使用CSS布局打印具有许多列/行的HTML表格？全部内容，希望文章能够帮你解决使用CSS布局打印具有许多列/行的HTML表格？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。