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

Question

我想得到一个printout.for我已经写了一个媒体打印功能。工作正常。但我想增加行的高度打印epf no和name.how我能做到这一点。

以下是当前预览

这是我的代码

<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

在@media print中

只需更改整个tr

的高度

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

或者您可以将填充添加到所需的td

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

加上我做了一个简单的例子。

我使用JQ来模拟打印时发生的情况，分别增加了＆＃39; tr＆＃39;高度。所以你可以看到，通过增加tr高度，点击打印按钮后，就可以了。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;