打印時表格切成兩半

Question

如何避免發生這種情況？我不想通過PDF打印解決方案。有沒有辦法通過CSS來處理，如果沒有，是否有辦法檢查頁面上每一行的位置，如果它們通過了一定的限制，我會給它們上邊距？

以下是打印出來的表格代碼在某一點上的裁剪。

<table class="view-table" id="table"> 
<tbody class="vt-section"> 
      <!--Title--> 
      <tr data-holder="top_title" class="top_title"> 
       <th class="title">Income</th> 
      <th class="title thSection">July<br>2016</th><th class="title thSection">August<br>2016</th><th class="title thSection">September<br>2016</th><th class="title undefined">TOTALS</th></tr> 
      <!--Data--> 
      <tr data-holder="inc_food"> 
       <th class="vt-label-un">Food</th> 
      <td undefined="">$26,542.00</td><td undefined="">$25,955.00</td><td undefined="">$26,067.00</td><td class="bold">$78,564.00</td></tr> 
      <tr data-holder="inc_non_food"> 
       <th class="vt-label-un">Non-Food</th> 
      <td undefined="">$3,507.00</td><td undefined="">$3,020.00</td><td undefined="">$3,054.00</td><td class="bold">$9,581.00</td></tr> 
      <tr data-holder="inc_gasoline"> 
       <th class="vt-label-un">Gasoline</th> 
      <td undefined="">$0.00</td><td undefined="">$0.00</td><td undefined="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="inc_retail"> 
       <th class="vt-label-un">Retail</th> 
      <td undefined="">$0.00</td><td undefined="">$0.00</td><td undefined="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="inc_wholesale"> 
       <th class="vt-label-un">Wholesale</th> 
      <td undefined="">$0.00</td><td undefined="">$0.00</td><td undefined="">$0.00</td><td class="bold">$0.00</td></tr> 
      <!--Totals--> 
      <tr data-holder="inc_total_sales"> 
       <th class="vt-label-un bold">Total Sales</th> 
      <td class="incTotal">$30,049.00</td><td class="incTotal">$28,975.00</td><td class="incTotal">$29,121.00</td><td class="incFinal red bold">$88,145.00</td></tr> 
      </tbody> 
      <tbody class="vt-section"> 
      <!--Title--> 
      <tr> 
       <th class="title">Cost of Goods</th> 
      </tr> 
      <!--Data--> 
      <tr data-holder="cogs_beginning_inventory"> 
       <th class="vt-label-un">Beginning Inventory</th> 
      <td data-add="beginInv">$0.00</td><td data-add="beginInv">$0.00</td><td data-add="beginInv">$0.00</td><td class="empty"> </td></tr> 
      <tr data-holder="cogs_food"> 
       <th class="vt-label-un">Food</th> 
      <td data-add="cogs">$10,704.56</td><td data-add="cogs">$10,034.19</td><td data-add="cogs">$7,045.04</td><td class="bold">$27,783.79</td></tr> 
      <tr data-holder="cogs_non_food"> 
       <th class="vt-label-un">Non-Food</th> 
      <td data-add="cogs">$8,943.93</td><td data-add="cogs">$7,442.25</td><td data-add="cogs">$5,462.66</td><td class="bold">$21,848.84</td></tr> 
      <tr data-holder="cogs_gasoline"> 
       <th class="vt-label-un">Gasoline</th> 
      <td data-add="cogs">$0.00</td><td data-add="cogs">$0.00</td><td data-add="cogs">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="cogs_merchandise"> 
       <th class="vt-label-un">Merchandise</th> 
      <td data-add="cogs">$1,373.65</td><td data-add="cogs">$1,640.40</td><td data-add="cogs">$503.52</td><td class="bold">$3,517.57</td></tr> 
      <!--Totals--> 
      <tr data-holder="cogs_ending_inventory"> 
       <th class="vt-label-un">Ending Inventory</th> 
      <td data-add="endInv">$0.00</td><td data-add="endInv">$0.00</td><td data-add="endInv">$0.00</td><td class="empty"> </td></tr> 
      </tbody> 
      <tbody class="vt-section"> 
      <!--Title--> 
      <tr data-holder="cogs_total"> 
       <th class="title">COGS Total</th> 
      <td class="cogsTotal bold">$21,022.14</td><td class="cogsTotal bold">$19,116.84</td><td class="cogsTotal bold">$13,011.22</td><td class="cogsFinal red bold">$53,150.20</td></tr> 
      <tr data-holder="cogs_gross_profit"> 
       <th class="vt-label-un bold">Gross Profit</th> 
      <td class="grossProfit bold">$9,026.86</td><td class="grossProfit bold">$9,858.16</td><td class="grossProfit bold">$16,109.78</td><td class="grossFinal red bold">$34,994.80</td></tr> 
      </tbody> 
      <tbody class="vt-section"> 
      <!--Title--> 
      <tr> 
       <th class="title">Expenses</th> 
      </tr> 
      <!--Data--> 
      <tr data-holder="exp_accounting"> 
       <th class="vt-label-un">Accounting</th> 
      <td class="">$200.00</td><td class="">$675.00</td><td class="">$200.00</td><td class="bold">$1,075.00</td></tr> 
      <tr data-holder="exp_advertisement"> 
       <th class="vt-label-un">Advertisement/Printing</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_alarm"> 
       <th class="vt-label-un">Alarm/Security</th> 
      <td class="">$91.98</td><td class="">$91.98</td><td class="">$97.98</td><td class="bold">$281.94</td></tr> 
      <tr data-holder="exp_auto"> 
       <th class="vt-label-un">Auto Expense</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_bank"> 
       <th class="vt-label-un">Bank-Misc Charges</th> 
      <td class="">$497.59</td><td class="">$488.52</td><td class="">$479.35</td><td class="bold">$1,465.46</td></tr> 
      <tr data-holder="exp_commission"> 
       <th class="vt-label-un">Comission</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_contributions"> 
       <th class="vt-label-un">Contributions</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_delivery"> 
       <th class="vt-label-un">Delivery/Freight</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_deprication"> 
       <th class="vt-label-un">Deprecation</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_equipment"> 
       <th class="vt-label-un">Equipment Rental</th> 
      <td class="">$75.00</td><td class="">$75.00</td><td class="">$75.00</td><td class="bold">$225.00</td></tr> 
      <tr data-holder="exp_fines"> 
       <th class="vt-label-un">Fines/Penalties</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_insurance"> 
       <th class="vt-label-un">Insurance</th> 
      <td class="">$2,995.00</td><td class="">$344.65</td><td class="">$346.41</td><td class="bold">$3,686.06</td></tr> 
      <tr data-holder="exp_interest"> 
       <th class="vt-label-un">Interest</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_laundry"> 
       <th class="vt-label-un">Laundry/Uniform</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_legal"> 
       <th class="vt-label-un">Legal/Accounting</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_license"> 
       <th class="vt-label-un">License/Dues/Fees</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_misc"> 
       <th class="vt-label-un">Miscellaneous</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_office"> 
       <th class="vt-label-un">Office Expense/Postage</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_outside"> 
       <th class="vt-label-un">Outside Services</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_payroll"> 
       <th class="vt-label-un">Payroll</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$10,400.00</td><td class="bold">$10,400.00</td></tr> 
      <tr data-holder="exp_payroll_tax"> 
       <th class="vt-label-un">Payroll Tax</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$845.43</td><td class="bold">$845.43</td></tr> 
      <tr data-holder="exp_pension"> 
       <th class="vt-label-un">Pension/401k</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_professional"> 
       <th class="vt-label-un">Professional Services</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_property"> 
       <th class="vt-label-un">Property Tax</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_rent"> 
       <th class="vt-label-un">Rent</th> 
      <td class="">$2,500.00</td><td class="">$2,500.00</td><td class="">$2,500.00</td><td class="bold">$7,500.00</td></tr> 
      <tr data-holder="exp_repairs"> 
       <th class="vt-label-un">Repairs/Maintenance</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_scavenger"> 
       <th class="vt-label-un">Scavenger/Extermination</th> 
      <td class="">$262.88</td><td class="">$0.00</td><td class="">$264.96</td><td class="bold">$527.84</td></tr> 
      <tr data-holder="exp_sub"> 
       <th class="vt-label-un">Sub Contractors</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_supplies"> 
       <th class="vt-label-un">Supplies and Materials</th> 
      <td class="">$0.00</td><td class="">$51.68</td><td class="">$0.00</td><td class="bold">$51.68</td></tr> 
      <tr data-holder="exp_tax_sales"> 
       <th class="vt-label-un">Tax Sales</th> 
      <td class="">$728.00</td><td class="">$675.00</td><td class="">$668.00</td><td class="bold">$2,071.00</td></tr> 
      <tr data-holder="exp_tax_corporate"> 
       <th class="vt-label-un">Tax Corporate</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_tax_other"> 
       <th class="vt-label-un">Tax Other</th> 
      <td class="">$42.00</td><td class="">$34.00</td><td class="">$36.00</td><td class="bold">$112.00</td></tr> 
      <tr data-holder="exp_travel"> 
       <th class="vt-label-un">Travel/Entertainment</th> 
      <td class="">$0.00</td><td class="">$0.00</td><td class="">$0.00</td><td class="bold">$0.00</td></tr> 
      <tr data-holder="exp_telephone"> 
       <th class="vt-label-un">Telephone</th> 
      <td class="">$100.80</td><td class="">$354.90</td><td class="">$196.26</td><td class="bold">$651.96</td></tr> 
      <tr data-holder="exp_utilities"> 
       <th class="vt-label-un">Utilities</th> 
      <td class="">$1,012.47</td><td class="">$1,396.90</td><td class="">$1,126.07</td><td class="bold">$3,535.44</td></tr> 
      <tr data-holder="exp_total"> 
       <th class="vt-label-un bold">Expense Total</th> 
      <td class="expTotal bold">$8,505.72</td><td class="expTotal bold">$6,687.63</td><td class="expTotal bold">$17,235.46</td><td class="expFinal red bold">$32,428.81</td></tr> 
      </tbody> 
      <tbody class="vt-section"> 
      <!--Title--> 
      <tr data-holder="net_inc_loss"> 
       <th class="title">Net Income/Loss</th> 
      <td class="netIncTotal">$521.14</td><td class="netIncTotal">$3,170.53</td><td class="netIncTotal">$-1,125.68</td><td class="netIncFinal red bold">$2,565.99</td></tr> 
      <tr data-holder="inc_lottery"> 
       <th class="vt-label-un">Lottery Commission</th> 
      <td class="netAdd">$376.54</td><td class="netAdd">$524.75</td><td class="netAdd">$412.02</td><td class="bold">$1,313.31</td></tr> 
      <tr data-holder="inc_other"> 
       <th class="vt-label-un">Other Commission</th> 
      <td class="netAdd">$0.00</td><td class="netAdd">$468.80</td><td class="netAdd">$288.80</td><td class="bold">$757.60</td></tr> 
      <tr data-holder="total_other_inc"> 
       <th class="vt-label-un bold">Total Other Income</th> 
      <td class="otherIncTotal bold">$376.54</td><td class="otherIncTotal bold">$993.55</td><td class="otherIncTotal bold">$700.82</td><td class="totalOtherFinal red bold">$2,070.91</td></tr> 
      </tbody> 
      <tbody class="vt-section"> 
      <!--Title--> 
      <tr data-holder="total_inc_loss"> 
       <th class="title">TOTAL Income/Loss</th> 
      <td class="netIncTotals bold">$897.68</td><td class="netIncTotals bold">$4,164.08</td><td class="netIncTotals bold">$-424.86</td><td class="bold red">$4,636.90</td></tr> 
      </tbody> 
</table> 

Answer 1

使用此代碼：

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
<title>Test</title> 
 
<style type="text/css"> 
 
table { page-break-inside:auto } 
 
tr { page-break-inside:avoid; page-break-after:auto } 
 
thead { display:table-header-group } 
 
tfoot { display:table-footer-group } 
 
</style> 
 
</head> 
 
<body> 
 
<table> 
 
\t <thead> 
 
\t \t <tr><th>heading</th></tr> 
 
\t </thead> 
 
\t <tfoot> 
 
\t \t <tr><td>notes</td></tr> 
 
\t </tfoot> 
 
\t <tbody> 
 
\t <tr> 
 
\t \t <td>x</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>x</td> 
 
\t </tr> 
 
\t <!-- 500 more rows --> 
 
\t <tr> 
 
\t \t <td>x</td> 
 
\t </tr> 
 
</tbody> 
 
</table> 
 
</body> 
 
</html>

Answer 2

你應該創建一個CSS文件打印樣式。

<link href="/print.css" rel="stylesheet" type="text/css" media="print">