Question

我有一个包含动态填充表格的网页。它们很宽，因此在页面上显示时会有水平滚动条。

我的问题是，当我去打印时，桌子被切断了一点点。作为一种解决方案，我想通过更改某些<td>元素的内容来重新格式化表格，以使其适合，例如：

//before
2014-01-23T18:28:35

//after
2014-01-23
18:28:35

这会减小表格的宽度，使其在打印时适合一页。

到目前为止，我有两个想法：

当我动态填充表格时，还会使用修改后的数据填充第二个表格。在屏幕上时，将显示原始表，而第二个将被隐藏。打印时，将隐藏原始表格，并显示第二个表格。
调用JavaScript函数或使用CSS仅在打印时修改<td>元素的内容。（这有可能吗？）

这种情况的最佳方法是什么？

修改

我不打算仅在打印时使用CSS样式表。我已经这样做了，并将字体大小缩小到最小尺寸（在我看来），以便人类可读性。

Answer 1

您可以在css中添加@media print个内容，以更改打印方式的样式。

因此，如果你只想缩小一些td，你可以这样做：

@media print {
    td {width: 50px}
}

Here，here和here就是您如何做到这一点的好例子。它是非常强大的东西，你可以改变任何东西，使打印看起来完全不同。

您可以将其添加到现有的css文件中，或创建一个只有您的打印css的全新文件。大多数人都选择第二种选择，因此所有css都在同一个地方。如果您这样做，则必须将media=print添加到您的css链接：

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

在问题澄清后编辑：

您可以使用选项编号1的缩小版本。

不是制作两个完整的表并隐藏一个表，而是将div放入需要两种类型数据的每个td中。为屏幕css隐藏一个，然后切换您在print css中隐藏的那个。

这似乎比完全不同的表更少开销。

这样的事情：

<td>
    <div class='screenShow'>Show this on the screen</div>
    <div class='printShow'>Show this when I print</div>
</td>

然后css将是：

 @media screen {
     screenShow {display: block}
     printShow {display: none}
}

@media print {
     screenShow {display: none}
     printShow {display: block}
 }

或block以外的其他内容，无论是什么使它看起来都正确。

Answer 2

您可以使用样式表进行打印。

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

此处定义的样式仅在您打印页面时显示。

Answer 3

我最终在@Bobo的评论中找到了解决方案。

在每个<td>中，我将两个文本选项放在<span>元素中。

<td><span id="hideOnPrint">SCREEN_TEXT</span><span id="hideOnScreen">PRINT_TEXT</span></td>

在screen.css中，我只隐藏了id="hideOnScreen"。

在print.css中，我只隐藏了id="hideOnPrint"。

仅在打印时修改网页中的表格

3 个答案: