如何在 bootstrap 上使 table 边框变黑以便打印

Question

我想打印包含 table 的页面。当我打印它时，它总是更改为 bootstrap 默认颜色。我正在使用 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

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

如何在 bootstrap 上使 table 边框变黑以便打印

How do I make table border black on bootstrap for print

css

bootstrap-4

css-print