如何在打印时使Bootstrap表格边框变为黑色

Question

我想打印一个包含表格的页面，但是当我打印时它总是变成了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 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>

- Martin Christopher

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

- Zachary

---

它在某种程度上没有影响，但 Stefan 的答案起作用了，顺便说一句谢谢。 - Martin Christopher

这个解决方案可能会使用“.table thead tr th”来实现 - 在thead tr中不使用td。 - qxotk

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

- StefanBob

---

它可以工作，但我有一个类为 thead-light 的 thead，它没有受到影响。 - Martin Christopher

请添加另一个针对 thead-light 的样式。这个类在这里没有被选中。 - StefanBob

我正在使用这个代码，但它没有任何效果：.table thead thead-light tr td{ border: 1px solid #000000 !important; } - Martin Christopher

抱歉，如果它像那样嵌套，那么选择它将会有问题，只针对.thead-light做一个就好了。 - StefanBob

或者尝试使用 .table.thead-light thead tr td {...}。 - qxotk

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>

- Sabaoon Bedar