Question

所以，我有这个页面，其中包含一个包含大量行的表，需要打印为硬拷贝。当我从这个页面打印或获得PDF输出时会发生奇怪的事情：在第一页之后，其余页面完全失去了CSS样式，如字体，颜色，表格边框等。此问题仅发生在Firefox中，Chrome在打印或PDF输出方面没有问题。当我在Firefox中查看print preview时，一切似乎都很好。

这就是我设法将长桌分成几页的方法。是否有任何理由在分页发生后它失去它的风格？

@media print {
    .table-striped{
      //my table
      page-break-inside:auto;
      tr{
        page-break-inside:avoid;
      }
    }
    .isPrint{
     //main div which wraps table
        page-break-inside: auto;
      }

    .table-bordered > thead > tr > th {
        background: #666 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
      }
    .table-bordered > tbody > tr > td {
        -webkit-print-color-adjust: exact;
      }
    .table.table-bordered tr:nth-child(odd) > td {
        background: #e5e5e5 !important;
       -webkit-print-color-adjust: exact;
      }
    .table-bordered > thead > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > tfoot > tr > td {
        border: 1px solid #000 !important;
        -webkit-print-color-adjust: exact;
      }

}

编辑：这就是我的html代码的用法。我还在上面的css部分添加了表类：

<article class="isPrint">
  <table class="table table-bordered table-striped" style="font-family: mitraBold" ng-if="items.length > 0">
    <thead>
      <tr>
        <th>INDEX</th>
        <th>ID</th>
        <th>NAME</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in items track by $index">
        <td>{{$index+1}}</td>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>      
      </tr>
    </tbody>
  </table>
  <h1 class="text-center" ng-if="items.length <= 0">
    ERROR
  </h1>
</article>

Firefox在打印网站时遇到问题

0 个答案: