打印预览隐藏表格边框

Posted 2023-03-06

【中文标题】打印预览隐藏表格边框

【英文标题】：print preview hides table border

【发布时间】：2015-02-21 21:08:22

【问题描述】：

我有一张带有1px border 的普通桌子。它看起来很好，什么不是：

但是一旦我进入打印预览，我的边框就变得不可见：

当我打印出来的页面很好时，只有当我尝试将其保存为 PDF 时，这些行才显示出来 css：

.print_table 
    width: 900px;
    border: solid 1px;
    border-collapse: collapse;

.print_table th
    border-color: black;
    font-size: 12px;
    border: solid 1px;
    border-collapse: collapse;
    margin: 0;
    padding: 0;

.print_table td
    border-color: black;
    font-size: 12px;
    border: solid 1px;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    text-align: center;

.print_table tr:nth-child(odd)
    background-color:#E8E8E8;

.print_table tr:nth-child(even)
    background-color:#ffffff;

编辑：甚至在我的边界上尝试过!important，什么都没有。 尝试将边框设置为 2px，它可以工作，但 2px 太大了

【参考方案1】：

将整个内容包装在 @media all 规则中。这会将 CSS 应用于各种显示，在这种情况下，包括打印和屏幕。

@media all 
    /* Your code here */

更多关于@media的查询：http://www.w3schools.com/css/css_mediatypes.asp

JSFiddle 演示：http://jsfiddle.net/gbftsxsu/embedded/result/