边框颜色引导@print无法正常工作

Question

＆＃13;

＆＃13;

$("#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);
        });

＆＃13;

.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;
        }
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

我尝试了很多东西，想法甚至试图改变bootsrtap.css本身但没有任何效果。任何人都可以告诉我的方式吗？

Answer 1

您需要使用!important来覆盖已由bootstrap或其他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 ;
        }
    }

Answer 2

你需要使用颜色属性而不是黑色或红色你可以使用颜色属性！重要的CSS规则

＆＃13;

＆＃13;

$("#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);
        });

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

确保在导入bootsrtap后导入style.css 这样你的css文件就可以覆盖bootstrap