Border for div not displaying even with class while printing?

user_10562614 0
Viewed 262

print preview screenshot
I want to print the div with border, the border works fine in html page but in print preview the border not displaying.

even i have added inline css for <div class="sfborder"> this was not resulting the correct output, how can i solve this?

<style>
   .sfborder {
    border: 1px solid black !important;
    border-collapse: collapse !important;
    border-radius: 2px !important;
    margin-bottom: 10px;
    overflow: hidden;
}
    @media print {
      .sfborder {
        border: 1px solid !important;
        border-collapse: collapse !important;
        border-radius: 2px !important;
        margin-bottom: 10px;
        overflow: hidden;
      }
    }
</style>
<div class="row">
  <div class="col-sm-12">
    <div class="sfborder">
      <div class="col-sm-4">
        <h6 class="text-info">Quote to</h6>
        <h6>Kadamba India Technologies PVT LTD</h6>
        <p>'Kasturba Nagar, Mysore Road, Bangalore - 560026</p>
      </div>
      <div class="col-sm-4">
        <h6 class="text-info">Ship To</h6>
        <h6>Kadama India Technologies PVT LTD</h6>
        <p>'Kasturba Nagar, Mysore Road, Bangalore - 560026</p>
      </div>
      <div class="col-sm-4">
        <div class="col-sm-12">
          <h6 class="text-info">Delivery Terms</h6>
          <p>Advance</p>
        </div>
        <div class="col-sm-12">
          <h6 class="text-info">Payment Terms</h6>
          <p>Against Delivery</p>
        </div>
        <div class="col-sm-12">
          <h6 class="text-info">Other Reference</h6>
          <p>Shipping charges extra</p>
        </div>
      </div>
    </div>
  </div>
</div>

window printing css html
1 Answers

Can i just ask why you are using @media print for your css, i would personally just have it in the same file, or just have the css file without the @media print { }

<style>
  .sfborder {
     border: 1px solid !important;
     border-collapse: collapse !important;
     border-radius: 2px !important;
     margin-bottom: 10px;
     overflow: hidden;
    }
</style>

have you tried just leaving it as above and removing the @media print?

and also did you import the css file correctly?

user_130608210
Related