打印一个非常宽的 HTML 表格而不剪裁右手边 [英] Print a very wide HTML table without clipping right hand side

查看：10
本文介绍了打印一个非常宽的 HTML 表格而不剪裁右手边的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个包含几列的表格.

I have a table with several columns.

打印此类表格时，不会打印右侧的列，即使横向打印也不行.

When you print such table, the columns on right will not print, not even when you print in landscape orientation.

浏览器应该打印整个表格，必要时使用多张表格.CSS/JavaScript 解决方案是可以接受的.

The browser should print entire table, use multiple sheets if necessary. CSS/JavaScript solutions are acceptable.

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

Click the print button in the following demo. Look at the right hand side of page in print preview window.

$(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" class="description"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <th rowspan="4">Batch number 2</th>
    <td rowspan="4" class="description"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <th rowspan="4">Batch number 3</th>
    <td rowspan="4" class="description"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <th rowspan="2">Batch number 4</th>
    <td rowspan="2" class="description"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <th>Total</th>
    <td class="description"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
</table>

推荐答案

这是我的做法:

我所做的是:

  • 创建一个适合 A4 尺寸页面的固定宽度 div
  • 复制该 div 内的表格
  • 滚动表格 x 像素以使用 CSS 定位将所需部分置于焦点"
  • 重复这个过程y次
  • Create a fixed width div that fits nicely on an A4 size page
  • Copied the table inside that div
  • Scroll the table x pixels to bring the desired portion in "focus" using CSS positioning
  • Repeat this process y times

示例:如果表格宽度为 2000 像素且页面宽度设置为 600 像素，则 y 应为 4，x 将为 >0、600、1200 和 1800.

Example: if the table is 2000px wide and page width is set to 600px then y should be 4 and x will be 0, 600, 1200 and 1800.

这篇关于打印一个非常宽的 HTML 表格而不剪裁右手边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆