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

使用此代码：

＆＃13;

<!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>
	<thead>
		<tr><th>heading</th></tr>
	</thead>
	<tfoot>
		<tr><td>notes</td></tr>
	</tfoot>
	<tbody>
	<tr>
		<td>x</td>
	</tr>
	<tr>
		<td>x</td>
	</tr>
	<!-- 500 more rows -->
	<tr>
		<td>x</td>
	</tr>
</tbody>
</table>
</body>
</html>

＆＃13;

Answer 2

您应该创建一个css文件来打印样式。

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

打印时表格减半

2 个答案: