境界線の色、ブートストラップ@printが、私は、ブートストラップに基づくPHPページを印刷しています

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>

を働いていません。ページはブラウザで完全に見ることができますが、私が印刷している間は、テーブルの境界線の色がデフォルトのブートストラップ色に変更されます。

私は多くのことを試しました。アイデアはbootsrtap.css自体を変更しようとしましたが、何も働かなかったのです。誰か私に方法を示すことができますか？

Answer 1

ブートストラップやその他のCSSファイルによって既に適用されているCSSを上書きするには、!importantを使用する必要があります。 !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ファイルは、ブートストラップに

Answer 3

を上書きできるように、色のプロパティを使用することができます黒のようなまたは赤あなたはそれの色のプロパティを使用する必要はありませんbootsrtap をインポートした後、あなたのstyle.cssをインポートすることを確認してください！重要なCSSルールと

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