jquery - 边框颜色 Bootstrap @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>

我正在打印一个基于 bootstrap 的 php 页面。该页面可以在浏览器中完美地看到，但是当我打印它时，表格边框颜色更改为默认 Bootstrap 颜色。

我尝试了很多东西，想法甚至尝试改变 bootsrtap.css 本身但没有任何效果。谁能给我指路？

Answer 1

您需要使用 !important 来覆盖已经被 bootstrap 或其他 CSS 文件应用的 css。使用 !imporantant 为相应的 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 ;
        }
    }