Question

我们正在使用嵌套表。在 wkhtmltopdf 的帮助下将html转换为pdf时，我们面临着空白问题。我想讨论一些基于表行项目的场景。

当表格行项目较少时，一切都会正常进行。
当表格行项目在单个页面中空白处且可管理时空间问题来了。
当表格订单项较多且需要一页以上的页面时，进行调整，然后一切都会变得正确。

请提供解决方案。为了更好地参考，我附上了快照和HTML。尝试通过更改CSS来提供解决方案。

@charset "utf-8";
/* CSS Document */
body{ font-size:14px;font-family: 'Open Sans', sans-serif; background:#fff; margin:0px; padding:0px;color:#5f6367}
a,a:active,a:visited,a:hover,a:focus{text-decoration:none; outline:none;}
.CustomRow{margin:0px -15px;}
.CustomRow:after{content:"";clear:both;display: table;}
.colSm-4{float:left;width:33.333333%;padding:0px 15px;box-sizing:border-box;}
.printingSection{padding:0px 15px;}
.BillingPayble{padding:0px;}
.BillingPayble li{font-weight:bold;list-style:none;}
.billingSection .item{border:1px solid #000;padding:10px;min-height:350px;margin:20px 0px;}
.billingSection .item .heading{font-weight: bold;text-align:center;font-size:16px;border-bottom:solid 1px #000;}
.billingSection .item .content ul{padding:0px;}
.billingSection .item .content ul li{list-style:none;font-size:17px;line-height:24px;}
.billingSection .item .content p{font-size:17px;line-height:24px;}
.table thead{border:solid 1px #000;}
.table thead th,.table td{padding:6px;text-align:left;}
.borderSolid{border:solid 1px #000;margin-bottom:10px;}
.alignRight,.alignRight td{text-align:right !important;}
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
table {
     width: 100%;
    max-width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soave</title>



</head>

<body>
<div class="printingSection">
    <ul class="BillingPayble">
        <li>Please make check payable to:</li>
        <li>lorem ipsum </li>
        <li>lorem ipsum</li>
        <li>lorem ipsum</li>
        <li>lorem ipsum</li>
    </ul>
    <div class="billingSection">
    <div class="CustomRow">
      <div class="colSm-4">
          <div class="item">
              <div class="heading">lorem ipsum:</div>
              <div class="content">
                  <p>lorem ipsum lorem ipsum - <br/>
lorem ipsum<br/>
lorem ipsumlorem ipsum<br/>
                     lorem ipsum</p>
                  <ul>
                      
                      <li>lorem ipsum:</li>
                      <li>lorem ipsum No: <span>QGQHQGQHQ-0001</span></li>
                      <li>lorem ipsum Code:  <span>USD</span></li>
                      <li>lorem ipsum Date: <span>10-04-2018</span></li>
                      <li>lorem ipsum Date: <span>11-03-2018</span></li>
                      <li>lorem ipsum Terms lorem ipsum</li>
                  </ul>
              </div>
          </div>
        </div>
   
        <div class="colSm-4">
            <div class="item">
              <div class="heading">Seller:</div>
              <div class="content">
                   <p>lorem ipsum lorem ipsum<br/>
lorem ipsum.<br/>
lorem ipsum<br/>
23222-222-2222</p>
                  <ul>
                     
                   
                      <li>Purchase Date: <span>07-05-2018</span></li>
                      <li>Parts Counter Ticket No. : <span>12121212</span></li>
                      <li>Payment Terms Net 30 Days from Invoice Date</li>
                  </ul>
              </div>
          </div>
        </div>
         <div class="colSm-4">
        <div class="item">
              <div class="heading">Billing Info:</div>
              <div class="content">
                  <ul>
                     
                      <li>Billing Number: <span>Q)(Q)Q)Q)Q((Q</span></li>
                      <li>Authorized By: <span>PPP</span></li>
                      <li>Plan: <span>2017 lorem ipsum lorem ipsum</span></li>
                      
                  </ul>
              </div>
          </div>
        </div>
    </div>
    </div>
    <div class="productDescription">
        <table class="table">
            <thead>
            <tr>
                <th>Heading</th>
                <th>Heading 2</th>
                <th>Heading 3</th>
                <th>Heading 4</th>
                <th>Heading 4 </th>
                <th>Heading 5</th>
                <th class="alignRight">Heading 6</th>         
            </tr>
            </thead>
            <tbody>
			<tr>
				<td  colspan="7">
					<table>
						<tbody>
							
						
								<tr>
									<td colspan="7">
										<table>
											<tr>
												<td>Tech Comments: lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</td>
												</tr>
											<tr>
												<td>P.O Number:1241241241243</td>
											</tr>
										</table>
									</td>
								</tr>
								<tr> 
									<td>1</td>
									<td>PA123123D - 213123</td>
									<td>123  123   AA</td>
									<td>1.00</td>
									<td>$32.44</td>
									<td>$0.00</td>
									<td class="alignRight">$32.44</td>      
								</tr>
								<tr>
									<td>2</td>
									<td>123 123123 123</td>
									<td>YC3Z  2552    AA</td>
									<td>1.00</td>
									<td>$92.00</td>
									<td>$0.00</td>
									<td class="alignRight">$92.00</td>     
								</tr>
								<tr>
									<td>3</td>
									<td>123-123123 123 123</td>
									<td>PARTSALE</td>
									<td>0.00</td>
									<td>$0.44</td>
									<td>$0.00</td>
									<td class="alignRight">$0.44</td>      
								</tr>
								<tr> 
								<td>4</td>
								<td>213 123 FOR NEW 123</td>
								<td>CORE</td>
								<td>1.00</td>
								<td>$50.00</td>
								<td>$0.00</td>
								<td class="alignRight">$50.00</td>         
								</tr>
								<tr>
									<td>5</td>
									<td>123123 123123 - 123</td>
									<td>YC3Z  2C026   BB</td>
									<td>2.00</td>
									<td>$87.41</td>
									<td>$0.00</td>
									<td class="alignRight">$174.82</td>       
								</tr>
								
								<tr>
									<td>5</td>
									<td>123123 13 -13</td>
									<td>YC3Z  2C026   BB</td>
									<td>2.00</td>
									<td>$87.41</td>
									<td>$0.00</td>
									<td class="alignRight">$174.82</td>       
								</tr>
								<tr>
									<td>5</td>
									<td>132323 AS123123Y - BRA123213KE</td>
									<td>YC3Z  2C026   BB</td>
									<td>2.00</td>
									<td>$87.41</td>
									<td>$0.00</td>
									<td class="alignRight">$174.82</td>       
								</tr>
								<tr>
									<td>5</td>
									<td>123 ASY - 123</td>
									<td>YC3Z  2C026   BB</td>
									<td>2.00</td>
									<td>$87.41</td>
									<td>$0.00</td>
									<td class="alignRight">$174.82</td>       
								</tr>
								<tr>
									<td>5</td>
									<td>123123 ASY - 123123123</td>
									<td>YC3Z  2C026   BB</td>
									<td>2.00</td>
									<td>$87.41</td>
									<td>$0.00</td>
									<td class="alignRight">$174.82</td>       
								</tr>
								<tr>
									<td>5</td>
									<td>123123 ASY - 123123123</td>
									<td>YC3Z  2C026   BB</td>
									<td>2.00</td>
									<td>$87.41</td>
									<td>$0.00</td>
									<td class="alignRight">$174.82</td>       
								</tr>
								<tr>
									<td>5</td>
									<td>123123 ASY - 123123123</td>
									<td>YC3Z  2C026   BB</td>
									<td>2.00</td>
									<td>$87.41</td>
									<td>$0.00</td>
									<td class="alignRight">$174.82</td>       
								</tr>
								<tr>
									<td>5</td>
									<td>123123 ASY - 123123123</td>
									<td>YC3Z  2C026   BB</td>
									<td>2.00</td>
									<td>$87.41</td>
									<td>$0.00</td>
									<td class="alignRight">$174.82</td>       
								</tr>
								<tr>
									 <td></td>
									<td></td>
									<td></td>
									<td></td>
									
									<td colspan="3" class=" alignRight">
										<table class="borderSolid">
											<tr>
												<td>Subtotal: <span>$408.35</span></td>
												<td>Subtotal: <span>$408.35</span></td>
												<td>Subtotal: <span>$408.35</span></td>
											</tr>
										</table>
									</td>
										 
								</tr>
			
			
			</tbody>
					</table>
				</td>
			</tr>
			
			
			
			
			
			
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

wkhtmltopdf |嵌套表格HTML到PDF |空白空间问题

0 个答案: