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

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

我的问题是，当我开始打印时，表格会被一点一点地截断。作为一种解决方案，我希望通过更改某些

元素的内容来重新格式化表格，以使其适合，例如：

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

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

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

这将减小表格的宽度，以便在打印时可以放在一页上

---

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

动态填充表时，还将使用修改后的数据填充第二个表。在屏幕上时，将显示原始表格，而隐藏第二个表格。打印时，将隐藏原始表格，并显示第二个表格

仅在打印时调用JavaScript函数或使用CSS修改

元素的内容。（这可能吗？）

---

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

编辑

---

我并不是要在打印时才使用CSS样式表。我已经这样做了，并将字体大小缩小到最小（在我看来）以便于人类阅读。

有一个

@media print

可以添加到css中，以更改打印方式的样式

因此，如果您只想缩小一些

td

，您可以这样做，例如：

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

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

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

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

您可以将其添加到现有的css文件中，或者创建一个全新的文件，其中只包含打印css。大多数人倾向于第二种选择，因此所有css都集中在同一个位置。如果这样做，您必须将

media=print

添加到css链接：

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

---

或者除了

块之外的其他东西，只要看起来合适就行。
您可以使用样式表进行打印


这里定义的样式仅在打印页面时显示。
我在@Bobo的评论中使用了解决方案

在每个
中，我将文本的两个选项都放在
元素中

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

屏幕\u文本打印\u文本

在screen.css中，我只隐藏了
id=“hideOnScreen”

在print.css中，我只隐藏了
id=“hideOnPrint”
，因此您希望在打印时更改
td
中的数据，而不仅仅是更改其外观？正确。例如，在datetime字段中换行，如我上面的示例所示。请参阅我的编辑以获得澄清。我已经在使用样式表进行打印，我需要知道如何实际更改表的内容。您可以对选项1进行缩小。不要制作两个完整的表并隐藏其中一个，而是将div放入需要两种数据类型的每个td中。在屏幕css中隐藏一个，然后在打印css中切换要隐藏的内容。这似乎比一张完全不同的桌子的开销要少。谢谢！这个解决方案有效，我将使用它。因为它实际上不在你发布的答案中，所以我只能给你的帖子投上一票。我将为未来的人更改我的答案：）