0

我正在寻找一种使用 CSS 调整表格内容大小的方法，以确保在打印时显示所有内容，但仍保持文本不会为任何单个单元格换行。在这个例子中，

<table class="datatables" id="table1">
<tr>
<td style="white-space:nowrap;">This is a table with a bunch of data that stretches off the page when printed.</td>
<td style="white-space:nowrap;">I want it to print on one line, not wrap but also be sized small enough to fit on a printed page.</td>
<td style="white-space:nowrap;">It currently cuts off most of this last column.</td>
</tr>
</table>

最后一个 td 在打印时大部分被切断，但所有这些都按照我的意图显示在一行上。例如，我将样式内联，但将使用样式表。我理想的解决方案是自动调整字体大小以适应每行一行而不换行。任何想法将不胜感激。

4

4 回答 4

1

控制打印输出几乎是不可能完成的任务。您永远不知道用户使用的打印机的变量、可用的字体、设置的设置等。

我以前遇到过这个问题，对用户来说最干净的解决方案是将表格转换为 .pdf，这将在机器和打印机之间呈现几乎相同的内容。虽然从技术角度来看似乎并不那么容易，但有一个非常简单的解决方案：数据表。

使用“表格工具”插件，您可以创建任何表格的 .pdf 格式版本，只需几行代码并添加一些额外文件。这是一个有效的演示 简而言之，如果您的表格格式正确且不是非常大（确保使用<thead>标签），那么您应该能够上传所需的文件，应用演示代码并在选择器中进行更改以匹配您的表，参考便于创建 .pdf 的 swf 文件，它应该可以顺利运行。我在设置中看到的大多数问题都与对 swf 路径的错误引用有关。

瞧，可打印的简单代码。

于 2013-10-22T17:06:06.713 回答
1

也许你可以试试

@media print
 {
   table.datatables {font-size:10px} /*Type the value that you want*/
 }
于 2013-10-22T16:05:52.627 回答
0

您可以使用“打印选项”中的“查找比例字段”在Chrome 浏览器中检查打印设置，并根据需要调整页面大小。

于 2017-10-27T09:15:20.367 回答
0

这不是一个完整的解决方案，您需要检查哪些值适合您。

使用 CSS 变换比例属性。

在我的情况下，我的表格宽度更大，因此我使用 javascript 做到了这一点。由于我的宽度太大，我将其缩小并调整了边距，在 javascript 之后window.print()我将其恢复到原始状态。

document.getElementById('your table id').style.transform = ("scale(0.8)");
document.getElementById('your table id').style.margin = ("0 0 0 -15%");

你也可以在 CSS 中使用相同的属性。

#table {
  transform: scale(0.8); //Adjust this accrding to your need by printing
  margin : 0 0 0 -15%; //Adjust this accrding to your need by printing
}
于 2020-04-16T12:40:44.423 回答