Question

当我想在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类？

Answer 1

指定初始缩放尺寸打印所有内容。

@media print {
    body {
        zoom: .8
    }
}

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

Answer 2

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

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

在Chrome上打印Bootstrap表时出错

2 个答案: