打印非常宽的HTML表,而不会右手剪裁

概述我有一个表有几列. 具体问题 打印此表时,右侧的列将不会打印,即使在横向打印时也不会打印. 所希望的行为 浏览器应打印整个表,如有必要,请使用多张表. CSS / JavaScript解决方案是可以接受的. 最重要的代码是重现问题 点击下面的演示中的打印按钮.在打印预览窗口中查看页面的右侧. $(function() { $("input:first").click(function() { 我有一个表有几列.

具体问题

打印此表时,右侧的列将不会打印,即使在横向打印时也不会打印.

所希望的行为

浏览器应打印整个表,如有必要,请使用多张表. CSS / JavaScript解决方案是可以接受的.

最重要的代码是重现问题

点击下面的演示中的打印按钮.在打印预览窗口中查看页面的右侧.

$(function() {  $("input:first").click(function() {    window.print();  });  $(".description").each(function() {    var text = "Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nulla placerat malesuada soDales. Nulla convallis neque lorem,ac varius enim. Ut dAPIbus,orci at feugiat eleifend,dui mi lobortis tortor,ac egestas neque enim et neque. Donec tempus mi quis tellus dAPIbus eu blandit magna sagittis. Curabitur ac ultrices tortor. Aliquam ID tincIDunt urna. Nunc ID neque ac urna congue convallis. Etiam eget massa vitae justo aliquam pulvinar vitae ut diam.";    text = text.substr(0,Math.ceil(Math.random() * 100));    $(this).text(text);  });  $(".number").each(function() {    var text = (Math.random() * 1000).toFixed(2);    $(this).text(text);  });});

@media screen {  input {    wIDth: 100%;    margin: 1em 0;  }}@media print {  input {    display: none;  }}th {  Font: bold 12px sans-serif;  border: 1px solID;  white-space: nowrap;}td {  Font: 12px sans-serif;  border: 1px dotted;}td.description {  min-wIDth: 200px;  border-style: solID;}td.number {  padding-left: 20px;  text-align: right;  border-style: solID;}

<script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/1.9.1/jquery.min.Js"></script><input type="button" value="Print"><table>  <tr>    <td></td>    <td></td>    <th colspan="12">2009</th>    <th colspan="12">2010</th>    <td></td>  </tr>  <tr>    <td></td>    <th>Description</th>    <th>Jan</th>    <th>Feb</th>    <th>Mar</th>    <th>Apr</th>    <th>May</th>    <th>Jun</th>    <th>Jul</th>    <th>Aug</th>    <th>Sep</th>    <th>Oct</th>    <th>Nov</th>    <th>Dec</th>    <th>Jan</th>    <th>Feb</th>    <th>Mar</th>    <th>Apr</th>    <th>May</th>    <th>Jun</th>    <th>Jul</th>    <th>Aug</th>    <th>Sep</th>    <th>Oct</th>    <th>Nov</th>    <th>Dec</th>    <th>Total</th>  </tr>  <tr>    <th rowspan="2">Batch number 1</th>    <td rowspan="2" ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>  </tr>  <tr>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>  </tr>  <tr>    <th rowspan="4">Batch number 2</th>    <td rowspan="4" ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>  </tr>  <tr>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>  </tr>  <tr>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>  </tr>  <tr>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>  </tr>  <tr>    <th rowspan="4">Batch number 3</th>    <td rowspan="4" ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>  </tr>  <tr>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>  </tr>  <tr>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>  </tr>  <tr>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>  </tr>  <tr>    <th rowspan="2">Batch number 4</th>    <td rowspan="2" ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>  </tr>  <tr>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>  </tr>  <tr>    <th>Total</th>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>    <td ></td>  </tr></table>

解决方法 这是我这样去的：

> Demo和Code
> Article

我做的是：

>创建一个适合A4尺寸页面的固定宽度的div
>复制表格里面的div
>滚动表格x像素,使用CSS定位将所需的部分置于“对焦”中
>重复此过程y次

示例：如果表的宽度为2000px,页宽设置为600px,则y应为4,x为0,600,1200和1800.

总结

以上是内存溢出为你收集整理的打印非常宽的HTML表,而不会右手剪裁全部内容，希望文章能够帮你解决打印非常宽的HTML表,而不会右手剪裁所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。