边框颜色引导程序@print不起作用

Question

$("#print_btn_tm").click(function() {
            var link = '<link href=<?php echo base_url("../bootstrap/css/bootstrap.css") ?> rel="stylesheet" />';
            var divContents2 = link+$("#print1").html();
            var printWindow2 = window.open('', '', 'height=400,width=600');

            setTimeout(function (){
                printWindow2.document.write(divContents2);
            },1500);
            setTimeout(function (){
                printWindow2.print();
                printWindow2.close();
            },2000);
        });

.table thead tr td,.table tbody tr td{
        border-width: 1px;
        border-style: solid;
        border-color: black;
        font-size: 10px;
        padding:0px;
    }
    .scc{
        font-size: 10px;
        }
    @media print{
        .table thead tr td,.table tbody tr td{
            border-width: 1px;
            border-style: solid;
            border-color: black;
            font-size: 10px;
            background-color: red;
            padding:0px;
            -webkit-print-color-adjust:exact;
        }
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-bordered" style="border-width: 1px;border-style: solid;border-color: black;">
    <tr>
        <td width='10%' style="padding:0px;">(a)</td>
        <td colspan='2' class="text-center" style="text-align:center;padding:0px;"> Particulars</td>
    </tr>
    <tr>
        <td style="padding:0px;"></td>
        <td style="padding:0px;" width="45%">ABC</td>
        <td style="padding:0px;" width="45%">DEF</td>
    </tr>
    <tr>
        <td style="padding:0px;"></td>
        <td style="padding:0px;">GHI</td>
        <td style="padding:0px;"><?php echo "M/S ".strtoupper("foo"); ?></td>
    </tr></table>

我正在基于引导程序打印php页面。该页面可以在浏览器中完美显示，但是在我打印该页面时，表格边框颜色已更改为默认的引导程序颜色。

我尝试了很多事情，想法甚至尝试更改bootsrtap.css本身，但没有任何效果。有人可以给我指路吗？

Answer 1

您需要使用!important来覆盖引导程序或其他CSS文件已应用的css。使用!imporatant给予相应的CSS属性更高的优先级。

 @media print{
        .table thead tr td,.table tbody tr td{
            border-width: 1px !important;
            border-style: solid !important;
            border-color: black !important;
            font-size: 10px !important;
            background-color: red;
            padding:0px;
            -webkit-print-color-adjust:exact ;
        }
    }