css - 如何在引导程序上使表格边框变黑以进行打印

Question

我想打印我的页面，其中有表格。当我打印它时，它总是更改为引导程序默认颜色。我正在使用 ctrl+p / cmd+p 进行打印。我正在使用引导程序 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

这应该适合你。这将覆盖默认的 css。

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

Answer 2

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