2016-08-02 5 views
0

単純な表を印刷しようとしていますが、レイアウトが崩れているようです。なぜ誰が知っていますか?ここで印刷時に表のスタイルが乱れる

enter image description here

印刷プレビュー

enter image description here

を印刷する

表は、私は表を作成するために使用しているHTMLとJSです。

function printData() { 
 
    var divToPrint = document.getElementById("printtable"); 
 
    newWin = window.open(""); 
 
    newWin.document.write(divToPrint.outerHTML); 
 
    newWin.print(); 
 
    newWin.close(); 
 
} 
 

 
$('button').on('click', function() { 
 
    printData(); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="printtable" style="border: 1px solid black; width: 90mm; height: 29mm;"> 
 
    <div style="float: left; font-size: 10px; position: relative; top: 50%; transform: translateY(-50%); margin-left: 2mm;"> 
 
    <p> 
 
     <img src="/" alt="" height="30"> 
 
    </p> 
 
    <table> 
 
     <tbody> 
 
     <tr> 
 
      <td><u>Row 1</u>&nbsp;:</td> 
 
      <td>&nbsp; Row 1</td> 
 
     </tr> 
 
     <tr> 
 
      <td><u>Longer Row 2</u>&nbsp;:</td> 
 
      <td>&nbsp; Row 2</td> 
 
     </tr> 
 
     <tr> 
 
      <td><u>R3</u> :</td> 
 
      <td>&nbsp; Row 3</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div> 
 
<br /> 
 
<br /> 
 

 
<button>Print me</button>

+0

'@media print'スタイルを変更しているサードパーティのスタイルシートを使用していますか? – zero298

+0

私はスタイルシートをまったく使用していません。私はすべての必要なスタイルをhtmlの中に入れます –

答えて

0

あなたは、印刷に関連するスタイルを指定する必要があります。

あなたが最後に印刷

+0

テーブルを使わないと完璧に動作します。なぜテーブルのスタイルシートを作成するのですか?それらはどう違いますか? –

0

のスタイルを指定する@media printを使用することができ、私はテキストプリントがうまく、テーブルタグを使用せずに私のテキストを揃えることで、ここでis such alignment achievable without <table>?

を提案されたソリューションを使用していました。

関連する問題