如何增加@media打印功能的行高度

我想打印輸出。 epf no和name.how我可以這樣做。如何增加@media打印功能的行高度

這是當前預覽

這裏是我的代碼

<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>

來源

2016-08-01 colombo

沒有你試過最小高度「總表-TD」 ..而不是高度？ –

您是否嘗試將高度更改應用於父'tr'而不是'td'本身？ –

將'padding'添加到'.pay-sheet td' –

在 @media print

只是改變整個tr

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

的高度，或者你可以添加填充到想要的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>

來源

2016-08-01 11:59:42

如何增加@media打印功能的行高度

回答

相關問題