Twitter Bootstrap Question posted in

Border color bootstrap @print not working – Twitter bootstrap

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

I am printing a php page based on bootstrap. The page can be seen perfectly in browser, but while I print it, the table border color is changed to default bootstrap color.

I tried many things, ideas even try to change bootsrtap.css itself but nothing worked. Can anybody show me the way?

Tags:

3

Answers


  1. 0

    You need to use !important to override the css that has been already applied by bootstrap or other CSS files. Using !imporatant gives higher priority to the corresponding css property.

     @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 ;
        }
    }
    Login or Signup to reply.
  2. 0

    make sure to import your style.css after importing bootsrtap
    so that your css file can overwrite the bootstrap

    Login or Signup to reply.
  3. 0

    you need to use colors properties not it like Black or red you can use the colors properties with !important CSS rule

    $("#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: #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 ;
    }
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search