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

Question

你好我尝试从用户单击按钮打印（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 个解决方案

解决方案1
5 2017-01-06 09:52:08

解决方案2
2 已采纳 2017-01-10 16:48:57

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

问题描述

2 个解决方案

解决方案1 5 2017-01-06 09:52:08

解决方案2 2 已采纳 2017-01-10 16:48:57

解决方案1
5 2017-01-06 09:52:08

解决方案2
2 已采纳 2017-01-10 16:48:57