css - how can i increase the height of a row in @media print function -

i wants printout.for have written media print function.its working fine.but want increase height of row print epf no , name.how can that.

here current preview

here code

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

in @media print change height of whole tr

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

or add padding desired td

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

plus made simple example .

i used jq simulate happens when print, respectively , increasing 'tr' height. can see increasing tr height, after clicking on print button, work.

$(".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 print  </button>