2

We are using nested table . While converting html to pdf with the help of wkhtmltopdf we are facing blank space problem. There are some scenarios which I would like to discuss which is based on table line items.

  1. When table line items is less everything comes proper.
  2. When table line items is more and manageable in a single page blank space issue come.
  3. When table line items is more and require more than one page to adjust then also everything comes proper.

kindly provide solution. For better reference, I am attaching snapshot and HTML. Try to provide solution by changing in css .

enter image description here

@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>
Pankaj Pawar
  • 76
  • 1
  • 9

0 Answers0