Question

您好我尝试在用户单击按钮print（window.print）时使用css从表中删除边框，但它始终保持打印页面

这是我的css代码：

    @media print{

    body * {visibility: hidden;


    }

    table {
        border:solid; white !important;
        border-width:1px 0 0 1px !important;
        border-bottom-style: none;
    }
    th, td{
        border:solid; white !important;
        border-width:0 1px 1px 0 !important;
        border-bottom-style: none;
    }
}

这个css给了我这个结果：

表的底部边框显示我如何删除它谢谢你

Answer 1

您可以在CSS3 @media规则中使用：

border-bottom: none;

或

border: solid white !important;

使用border-bottom: none;可能会影响打印时的表格布局（取决于您是否使用默认值box-sizing）。

以下示例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        table {
            /* just an example */
            border: solid red;
            border-width: 1px 0 0 1px !important;
            border-bottom-style: none;
        }

        @media print {

            table {
                border: solid white !important;
                border-width: 1px 0 0 1px !important;
                border-bottom-style: none;
            }

            th, td {
                border: solid white !important;
                border-width: 0 1px 1px 0 !important;
                border-bottom-style: none;
            }
        }
    </style>
</head>
<body>
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>
</body>
</html>

Answer 2

最后这个解决方案对我有用：

@media print {

    * {
        color: #000;    
        background-color: #fff;
        @include box-shadow(none);
        @include text-shadow(none);
    }
}

如何使用css @media print打印时从表中删除边框

2 个答案: