Граница для div не отображается даже с классом во время печати?

#html #css #printing #window

#HTML #css #печать #окно

Вопрос:

Я хочу напечатать div с границей, граница отлично работает на html-странице, но при предварительном просмотре граница не отображается.

даже если я добавил встроенный css для <div class="sfborder"> , это не привело к правильному выводу, как я могу это решить?

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

Ответ №1:

Могу я просто спросить, почему вы используете @media print для вашего css, лично я бы просто поместил его в тот же файл или просто файл css без @media print { }

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

вы пробовали просто оставить все как указано выше и удалить печать @media?

а также правильно ли вы импортировали файл css?