css - 我怎样才能增加@media 打印功能中行的高度

Question

我想得到一个打印输出。因为我已经编写了一个媒体打印功能。它工作正常。但我想增加打印 epf 号和名称的行的高度。我该怎么做。

这是当前预览

这是我的代码

<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 来模拟打印时发生的情况，增加“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>