html - 打印一个非常宽的 HTML 表格而不裁剪右侧

转载作者：技术小花猫更新时间：2023-10-29 12:10:33

我有一个包含多个列的表格。

具体问题

当您打印此类表格时，右侧的列将不会打印，即使您横向打印时也是如此。

期望的行为

浏览器应该打印整个表格，必要时使用多张表格。 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" 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>

最佳答案

这是我的做法:

Demo和 Code
Article

我所做的是:

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

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

关于html - 打印一个非常宽的 HTML 表格而不裁剪右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8891944/

文章推荐： regex - 查找 HTML5 表单用于验证的正则表达式

文章推荐： regex - 使用 sed 捕获的组变量作为 bash 命令的输入

文章推荐： c - 使本地 HTTP 服务器无法从外部访问

文章推荐： linux - 通过 jenkins 构建步骤传递密码

PHP : echo"", 打印()，打印()
有没有更好的方法用 PHP 将数据输出到 html 页面？如果我想在 php 中用一些 var 制作一个 div，我会写类似的东西 print (''.$var.''); 或 echo "''.$v
javax 打印 vs java awt 打印 api
我可以使用 java awt print 来打印文档/文件而不是使用 javax print 吗？我发现在 java awt print 中有一个选项可以使用 AttributedString 将内容
R 命令行最佳实践 : exit, 打印 stdout、打印 stderr、避免警告
目前我通过以下方式运行 R 脚本: R --slave argument1 argument2 ... 我想知道 R 中关于如何退出脚本并发出警告的最佳实践，q() 会这样做吗？ if(!file.
c++ - 用 gcc 打印 c，用 g++ 打印 c++
谁能告诉我如何编写一个程序，用 gcc 编译时打印 c ，用 g++ 编译时打印 c++? 最佳答案 #ifdef __cplusplus printf("c++\n"); #else
android - 如何通过反射使用 KitKat 4.4 打印 API 打印 WebView？
我需要支持在 KitKat 设备上打印，但我的目标 SDK 是 13(无法更改)。特别是我需要打印一个 webview。这是用于打印 webview 的 API: http://developer
Python输入函数，打印
我正在尝试创建一个简单的函数，其中 python 将根据您的年份输入计算年龄。我已经尝试了几种方法，但我没有运气 atm。附:对不起，我是新手。 ame = input(" Enter your n
JavaFX 打印
JavaFX 2.0 是否支持打印？我有一个文本区域，我从中获取文本然后我想打印它，但似乎没有这个功能。当然，这里我说的是打印到打印机。 :) 最佳答案尚不支持。作为一种解决方法，您可以使用 Ja
Smalltalk - 打印 :
我试图找出printOn的重点。我查看了一些实现它的类，看起来它只是帮助打印不同数据类型的单位。这是准确的吗？如果是这样，有人能指出我如何为我自己的类(class)实现这一点的正确方向吗？我将在可能
打印 Canvas
我无法让 IE 打印我的 Canvas (使用 excanvas 生成)...我使用的是最新版本的 excanvas。 http://dl.dropbox.com/u/997831/canvas.ht
信号处理程序中的 C++ 打印？
我搜索了很多但没有人回答我的问题，我读到在这样的信号处理程序中使用 cout 是不安全的: void ctrlZHandler(int sig_num) { //SIGTSTP-18
python - MongoDB - 打印
我有兴趣打印一系列查询。我有以下代码。 start = datetime.datetime(2012, 2, 2, 6, 35, 6, 764) end = datetime.datetime(201
Java 打印 "?"而不是事物
public class javaClass { public static void main(String [] arg) { String row1 = "A____A"
python - 打印()到上一行？
我需要写入前一行的命令，例如不带\n 的 print()。下面是一些示例代码: a=0 print("Random string value") if a==0: print_to_prev
SwiftUI 打印 View
我有一个使用 UIKit 和 Objective C 的旧 iOS 应用程序，我目前正在将其移植到 SwiftUI 和 Swift。一切都很顺利，我喜欢 Swift 和 SwiftUI。该应用程序已经
Python 打印 while 循环的每次迭代
我创建了一个求和函数，它接受一个开始编号和一个结束编号，并返回这两点之间的总和答案 def print_sum_equations(start_number,end_number):
raku - 打印、放置和说的区别？
在 Perl 6 中，print 和有什么区别？ , put和 say ? 我怎么看 print 5不同，但 put 5和 say 5看起来一样。最佳答案 put $a就像 print $a.Str
jquery - 打印 getOrgChart
我正在使用 here 中的 getOrgChart 库，我正在尝试打印整个图表，而不仅仅是可见部分。不幸的是，当使用标准库打印功能时，它只会打印出第一部分，而我不知道如何打印整个图表(该图表相当宽，大
macos - cocoa 打印
我制作了一个非常适合 A4 页面的 View 。现在我想打印它。请注意，我没有使用drawRect或类似的东西，只是一个带有 subview 和文本标签的普通 View 。我的问题是，我对该 View
cocoa - 打印 NSImage
由于 Cocoa-Java 已弃用，我正在将 Cocoa-Java 代码迁移到 Cocoa + JNI。该代码打印存储在文件中的图像。新的 Cocoa 代码基本上是: NSImage *image =
delphi - 打印 TDBGrid
这个问题已经有答案了: Printing a TDBGrid (4 个回答) 已关闭 6 年前。如何在不安装或下载组件的情况下打印 DBGrid？或者如何将 DBGrid 的数据放入 RichE

技术小花猫

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 打印一个非常宽的 HTML 表格而不裁剪右侧

具体问题

期望的行为

重现问题所需的最短代码