html – 如何使用css @media 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给了我这个结果：

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

解决方法

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

border-bottom: none;

要么

border: solid white !important;

使用border-bottom：none;打印时会影响表格的布局(取决于您是否使用默认值的盒子大小).

下面是一个例子：

<!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>

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

解决方法

相关文章