Question

我想将页面打印在有表格的地方。当我打印时，它总是更改为引导程序默认颜色。我正在使用ctrl + p / cmd + p进行打印。我正在使用bootstrap 4和laravel 5.7

我尝试使用!important;仍然无法正常工作

我的CSS

<style media="screen">
@media print{
  .table thead tr td,.table tbody tr td {
     border: 1px solid #000000!important;
  }
}
</style>

我的桌子

<table class="col-12 table table-bordered table-sm" >
    <thead class="thead-light">
      <tr>
        <th>Description</th>
        <th>Quantity</th>
        <th>Unit Price (IDR)</th>
        <th>Amount (IDR)</th>
      </tr>
    </thead>
    @php
      $total=0;
    @endphp
    @foreach($ra->sale->details as $items)
      <tr>
        <td>{{ $items->good->name }}</td>
        <td>{{ $items->qty }} pcs</td>
        <td>{{ number_format($items->units,0,',','.') }}</td>
        <td>{{ number_format($items->total,0,',','.') }}</td>
      </tr>
      @php
        $total += $items->total;
      @endphp
    @endforeach
</table>

Answer 1

<style media="print"> .table thead tbody tfoot tr td { border: 1px solid #000000!important; } </style>

编辑2 ：（添加.thead-light选择器）

<style media="print">
  .thead-light {
     border: 1px solid #000000!important;
  }
</style>

如果选择器足够具体，则可以删除！important：

.table .thead-light {
   border: 1px solid #000000;
}

或

.table .thead-light tbody tfoot tr td {
    border: 1px solid #000000;
}

Answer 2

这应该为您工作。这将覆盖默认的CSS。

@media print{
            .table thead tr td,.table tbody tr td{
                border-width: 1px !important;
                border-style: solid !important;
                border-color: #000 !important;
            }
        }

Answer 3

在您的样式标签中试试这个：这对于也有 <thead> 标签的表格很有用。

@media print{
        .table thead tr td,.table tbody tr td{
            border-width: 1px !important;
            border-style: solid !important;
            border-color: black !important;

            -webkit-print-color-adjust:exact ;
        }


        .ta thead tr td,.ta tbody tr td{

            border-width: 0.7px !important;
            border-style: solid !important;
            border-color: rgba(0, 0, 0, 0.644) !important;

            -webkit-print-color-adjust:exact ;
        }
    }

如果还是不行，试试内联：

<table style="  border-width: 1px !important;
                border-style: solid !important;
                border-color: black !important;
                -webkit-print-color-adjust:exact ;
             ">
</table>

如何在引导程序上使表格边框为黑色以进行打印

3 个答案: