div to tableコンバータはありますか？

Question

私は、pdfkitの内部でレンダリングできるように、変換する必要がある構造化されたHTMLを大量に持っています。

私はpdfkitを使用していますが、レイアウトでうまくいくわけではありませんが、グリッドでうまくいきます。

ご協力いただければ幸いです！

<div class="row"> 
       <div class="col-md-10"> 
       <div class="col-md-3 left" style="padding: 20px 0 30px 0; color:#454545; font-family: Arial, sans-serif; font-size: 16px;"> 
        Packages 
       </div> 
       <div class="col-md-9 left" style="padding: 20px 0 30px 0; color:#454545; font-family: Arial, sans-serif; font-size: 16px;"> 
        <h4>User 1 </h4> 
        <div class="row"> 
         <div class="col-md-6"> 
         <p style="padding-left:20px"> 
          Total records <br/> 
          Total cycles <br/> 
          Total records out <br/> 
          Consumable Costs<br/> 
          <br/> 
          Total Artwork Changes <br/> 
          Artwork Change Costs <br/> 
          <br/> 
          <span style="color:green;">Artwork Change Discount </span><br/>        
          Subtotal <br/> 
          Sales Tax 5.5%<br/> 
          <br/> 
          <span style="font-size:18px; font-weight:strong;">Total</span><br/> 

         </p> 
         </div> 
         <div class="col-md-6 left"> 
         <p style="padding-left:20px;"> 
          23,334 <br/> 
          2 <br/> 
          46,668 <br/> 
          $6,445.34<br/> 
          <br/> 
          7 <br/> 
          $700.00 <br/> 
          <br/> 
          <span style="color:green;">-$350.00</span><br/> 
          $6,795.34<br/> 
          $373.74<br/> 
          <br/> 
          <span style="font-size:18px; font-weight:strong;">$6,421.50</span> 
          <br/><br/> 
         </p> 
        </div> 
        </div> 

        <h4>User 2 </h4> 
        <div class="row"> 
         <div class="col-md-6"> 
         <p style="padding-left:20px"> 
          Total records <br/> 
          Total cycles <br/> 
          Total records sent <br/> 
          Consumable Costs<br/> 
          <br/> 
          Total Artwork Changes <br/> 
          Artwork Change Costs <br/> 
          <br/> 
          <span style="color:green;">Artwork Change Discount </span><br/>        
          Subtotal <br/> 
          Sales Tax +5.5%<br/> 
          <br/> 
          <span style="font-size:18px; font-weight:strong;">Total</span><br/> 

         </p> 
         </div> 
         <div class="col-md-6 left"> 
         <p style="padding-left:20px;"> 
          23,334 <br/> 
          2 <br/> 
          46,668 <br/> 
          $6,445.34<br/> 
          <br/> 
          7 <br/> 
          $700.00 <br/> 
          <br/> 
          <span style="color:green;">-$350.00</span><br/> 
          $6,795.34<br/> 
          $373.74<br/> 
          <br/> 
          <span style="font-size:18px; font-weight:strong;">$6,421.50</span> 
          <br/><br/> 
         </p>       
        </div> 
        </div> 
       </div> 
       </div> 
      </div> 

Answer 1

常にあなたのCSSの

#rootTable .row {display: table;} 
#rootTable .row > [class^="col-"] {display: table-cell;} 

、 幸運を使用することができます。