在 Chrome 上打印 Bootstrap 表时出现错误

Posted 2023-03-05

【中文标题】在 Chrome 上打印 Bootstrap 表时出现错误

【英文标题】：Bug while printing a Bootstrap table on Chrome

【发布时间】：2015-05-13 07:09:19

【问题描述】：

当我想在 Chrome 下打印我的网页时，我遇到了一个奇怪的错误。我使用 Bootstrap 显示一个表格，它完全适合屏幕尺寸（无论屏幕尺寸是多少）。当我想在 Chrome 下打印网页时，表格被裁剪，而使用 Firefox 打印布局完美。

我已经设法在 JSFiddle here 上重现了我的错误。

我的表格的html代码是：

<table class="table table-condensed">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="...">
            <td>...</td>
            <!-- ... -->
        </tr>
        <tr class="separator empty" />
    </tbody>
</table>

您有解决此问题的想法吗？ 也许为表格使用不同的 Bootstrap css 类？

【参考方案1】：

指定打印所有内容的初始缩放大小。

@media print 
    body 
        zoom: .8
    

小提琴：http://jsfiddle.net/HB7LU/11671/

【讨论】：

谢谢，这仍然是一个奇怪的错误，但您的解决方法成功了

只是一种解决方法，而不是修复。对我没有帮助。

【参考方案2】：

Bootstrap 3 中存在一个已知错误，它似乎已推迟到 Bootstrap 4。该错误与打印样式中应用的响应性有关。

就我而言，将我所有的 col-sm-* 类更改为 col-xs-* 效果很好。