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

标签 html css angularjs twitter-bootstrap google-chrome

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

最佳答案

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

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

fiddle :http://jsfiddle.net/HB7LU/11671/

关于html - 在 Chrome 上打印 Bootstrap 表时出现错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28987559/

相关文章:

javascript - 桌面 View 上的 SlikNav 多级菜单?

javascript - 通过 url Bootstrap 调用 navtab

javascript - 侧边栏滚动连接到主容器

html - Bulma 输入宽度不一致

html - 为什么 HTML 注释缩进在浏览器中显示不同?

javascript - 元素落在视口(viewport)之外

javascript - Angularjs:单击表格中的任何单元格时,在单独的 div 中显示/隐藏值

javascript - 从javascript中的字符串中删除 '<and text within those>'

javascript - Angular - 无限 $digest 循环

javascript - 根据值数组从 Angular 中的 JSON 中过滤选择