私は@mediaの印刷機能の行の高さをどのように増やすことができますか

Question

私はprintout.forを取得したいと思います。私はmediaprintを書きましたfunction.itsはうまく働いていますが、印刷する行の高さを増やしたいepf noとname.how私はそれを行うことができます。ここで

はここに私のコードは、単に全体 tr

@media print{ 
    tr {height:40px;} 
} 

の高さを変更したり、あなたにパディングを追加することができ、あなたの@media printで

<style type="text/css"> 
    @media print{ 
     .total-sheet-td {height: 40px; vertical-align: middle;} 
     .printbutton {display: none} 
     .pay-sheet {border: none;} 
     .pay-sheet td {height: 35px !important;} 
     .pay-sheet .txt-al {text-align: center} 
     .pay-sheet .txt-al-r {text-align: right; padding-right: 2px;} 
     .pay-sheet .emt-row {height: 60px;border-right: none; border-left: none;} 
     .pay-sheet .emt-cell {border-right: none; border-left: none; } 
    } 
</style> 

Answer 1

ある現在のプレビュー

です所望のtd

@media print{ 
    .total-sheet-td {padding:20px 0} 
} 

私は簡単な例を作った。

私はJQを使って、それぞれ印刷するときに起こることをシミュレートして 'tr'の高さを増やしました。あなたは印刷ボタンをクリックした後にtrの高さを増やすことによってそれが動作することがわかります。

$(".printbutton").click(function(){ 
 
    $("tr").css({"height":"100px"}) 
 
})

tr { background:cyan} 
 
tr {height: 50px; vertical-align: middle;} 
 
table,td { border-collapse:collapse;} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
    <td>test</td> 
 
    <td>test</td> 
 
    <td>test</td> 
 
</tr> 
 

 
</table> 
 
<button class="printbutton"> 
 
Click to Print 
 
</button>