単純な表を印刷しようとしていますが、レイアウトが崩れているようです。なぜ誰が知っていますか?ここで印刷時に表のスタイルが乱れる
印刷プレビュー
を印刷する
表は、私は表を作成するために使用している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> :</td>
<td> Row 1</td>
</tr>
<tr>
<td><u>Longer Row 2</u> :</td>
<td> Row 2</td>
</tr>
<tr>
<td><u>R3</u> :</td>
<td> Row 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<br />
<button>Print me</button>
'@media print'スタイルを変更しているサードパーティのスタイルシートを使用していますか? – zero298
私はスタイルシートをまったく使用していません。私はすべての必要なスタイルをhtmlの中に入れます –