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

【问题标题】：How I can remove border from table while printing using css @media print如何在使用 css @media print 打印时从表格中删除边框
【发布时间】：2017-05-21 01:01:03
【问题描述】：

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

这是我的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 给了我这个结果：

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

【问题讨论】：

首先，尝试使用border:solid white !important;（在solid之后没有;）。
你能贴出你的html代码吗？
试试border-bottom: none;

标签： html css media-queries

【解决方案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>

【讨论】：

【解决方案2】：

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

@media print {

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

【讨论】：