html - Firefox でサイトの印刷に問題がある

Question

そのため、多くの行を持つ表を含むこのページがあり、ハード コピーとして印刷する必要があります。このページから印刷または出力を取得すると、何か奇妙なことが起こります。最初のページの後、残りのページは、フォント、色、表の境界線などのスタイルをPDF完全に失います。この問題は、Firefox と Chrome でのみ発生します。印刷、出力CSSともに問題ありません。PDFFirefoxで見ると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>