Question

我正在寻找一种方法来使用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在打印时大部分被切掉，但所有这些都显示在我想要的一行上。例如，我将样式内联，但将使用样式表。我理想的解决方案会自动调整字体大小以适应每行一行但不包装。任何想法都将不胜感激。

Answer 1

也许你可以试试

@media print
 {
   table.datatables {font-size:10px} /*Type the value that you want*/
 }

Answer 2

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

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

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

Voila，可打印，简单的代码。

Answer 3

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

Answer 4

这不是一个完整的解决方案，您需要检查它哪些值对您有用。

使用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
}

CSS将表格内容调整为打印宽度

4 个答案: