我想从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 …
我有这样一张桌子:
<table id="myTable" width="100%" border="5" style="table-layout:fixed">
<tr>
<td><img src="photo1"></td>
<td><img src="photo2"></td>
<td><img src="photo3"></td>
<td><img src="photo4"></td>
<td><img src="photo5"></td>
<td><img src="photo6"></td>
</tr>
</table>
如果用户的屏幕宽度很小,我需要包装列.我需要包装列并获得如下表格结果:
我添加了style ="table-layout:fixed"但是这使得表格宽度恰好为100%,但是图像会自动拉伸到一半以适应屏幕宽度.
如何将列发送到下一行？