在横向打印html表

时间:2012-12-26 08:06:43

标签: html css html-table landscape

我有一个从数据库动态生成的报告,这个报告的某个部分应该打印在一个表中。我想在横向大纲中打印这张表,其余的报告应该正常打印“肖像”。

那么,任何想法如何实现呢?

3 个答案:

答案 0 :(得分:1)

您可以在CSS中设置@page属性,请参阅下面的代码:

@media print{@page {size: landscape}}

答案 1 :(得分:0)

如果您创建一个表并将其视为相对于页面的100%宽度,则打印机应自动打印到整页宽度。是否获得横向或纵向取决于您在实际打印时在打印设置中选择的那个。你能够干净利落地完成这个任务的唯一方法是制作两个单独的html文档 - 一个包含肖像部分,另一个包含横向部分。然后分别打印每个文档。

完成任务只有两种理论方法: 1)某种浏览器插件可以为您发送单独的打印作业,找出文档的哪些部分应该以哪种方式打印。

2)使用CSS3转换。生成要打印的表格的静态图像,然后在页面上将其旋转(旋转)90度,使其在屏幕上看起来侧向。如果你旋转了文档的某些部分,那么从理论上讲,你可以在一个工作中完成整个任务。但是,甚至不要浪费你的时间。这将是一场彻头彻尾的噩梦。特别是如果你不得不问如何做到这一点。

答案 2 :(得分:0)

您可以通过以下方式将桌子旋转90度:

   <div style="display: block; margin: 0; break-before: page; width: 297mm; height: 210mm; transform: rotate(270deg) translate(-296mm, 0);
    transform-origin: 0 0;" >

 <table style="word-wrap: break-word; table-layout: fixed; width: 100%;">
   <tr><td>A row</td></tr>
 </table>
</div>

自动换行和表格布局样式对于将表格保留在页面内而不覆盖自身是必需的。您可能需要在div中调整宽度,高度和平移值,但是这些对于我来说对于A4页面有用。 它在Chrome中对我有用,但尚未检查其他人。