Google Chromeを持っていると、印刷されたページに新しい行が作成される

Question

私のウェブサイトで結果ボタンを押すと、最初の画像 などの正しい形式で表が表示されますが、印刷ボタンの表をクリックするとギリギリになります 2画像問題

 <table class="table table-bordered"> 
      <tr class="print-header"> 
       <th class="table-head" ng-repeat="cols in headercolumns">{{cols}}</th> 
      </tr> 

      <tr class="table-row" ng-repeat="scoresheet in scoresheets |filter:class"> 
       <td> 
        <p style="font-size : 20px">{{scoresheet.user.name}}</p> 
        <span>{{scoresheet.user.class.name}}</span> 
       </td> 
       <td><p style="font-size : 20px">{{scoresheet.result.statistics.score |number}}</p></td> 
       <td><p style="font-size : 20px">{{scoresheet.result.statistics.correct_answers}}</p></td> 
       <td><p style="font-size : 20px">{{scoresheet.result.statistics.incorrect_answers}}</p></td> 
       <td><p style="font-size : 20px">{{scoresheet.result.statistics.partial_answers}}</p></td> 
       <td><p style="font-size : 20px">{{scoresheet.result.statistics.pending_answers}}</p></td> 
       <td><p style="font-size : 20px">{{scoresheet.result.statistics.skipped_answers}}</p></td> 
       </tr> 

result table printing table

Answer 1

これは私の問題を解決します。

@media print { 
    td { 
     display: table-cell !important; 
    } 
} 

Answer 2

あなたは、スタイル、印刷文書にメディアクエリを使用することができます。

<link rel="stylesheet" type="text/css" href="/path/to/print.css" media="print"> 

Read More

を：そうでなければ、私はこれを自分でやったことがないのに、あなたも、あなたのHTML内の別々のスタイルシートをインポートすることができると信じて

@media print { 
    td { 
     display: block; 
    }  
} 

：あなたのCSSでは、あなたのような何かを行うことができます

JSFiddle Example