javascript - 打印旋转的 css 太短 (IE/FF)

Question

我正在尝试旋转宽表(工作时间表，请参见下面的示例图片)以进行打印。我这样做的原因是因为我希望表格延伸到多页，所以当你在纸上打印它时，你可以将不同的纸张放在一起并获得 1 个大小合适、可读的表格/时间表。现在我遇到的问题不是旋转本身，而是尝试打印表格时的页数。它没有将表格扩展到下一页，而是被 chop ，因此您只会看到顶部。现在 Google Chrome 可以很好地打印，它像我希望的那样将表格分布在 2 或 3 页上。然而，我在 Firefox 或 IE 中无法获得相同的结果。我正在使用 CSS transform:rotate 方法来旋转正文/时间表并在我的浏览器中获得想要的结果(见下文)。

transform:rotate(90deg);
-ms-transform:rotate(90eg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);

我已经尝试在表格中添加边距和填充，但它只会在页面周围移动表格，而不是将其扩展到下一页。添加 overflow (body *{ overflow:visible !important; }) 只会缩小正文，使其适合一页。

有什么方法可以在多个页面上打印这个宽表，以便 FF 和 IE 仍然可读吗？

提前致谢。

示例图片(时间 block 中通常有文字): (无法在横向模式下正常打印，因为文本太小而无法阅读。)

Answer 1

当您使用 css 旋转时，实际尺寸不会改变。

因此，如果您有一个 100 x 20 像素的 block 并旋转它。浏览器仍然会看到 100 x 20 像素的 block ，而您看到的是 20 x 100 的 block 。添加边距和填充不会改变这一点，您需要修改高度和宽度。

我想最简单的方法是添加一个高度与表格宽度相同的不可见 div，反之亦然。您可以为此使用 javascript。