有 div 到 table 转换器吗?

Is there a div to table converter?

我有大量结构化的 HTML 需要转换成才能在 pdfkit 中呈现。

我正在使用 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/>
                            ,445.34<br/>
                            <br/>
                            7 <br/>
                            0.00 <br/>
                            <br/> 
                            <span style="color:green;">-0.00</span><br/>
                            ,795.34<br/>
                            3.74<br/>
                            <br/>
                            <span style="font-size:18px; font-weight:strong;">,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/>
                            ,445.34<br/>
                            <br/>
                            7 <br/>
                            0.00 <br/>
                            <br/> 
                            <span style="color:green;">-0.00</span><br/>
                            ,795.34<br/>
                            3.74<br/>
                            <br/>
                            <span style="font-size:18px; font-weight:strong;">,421.50</span>
                            <br/><br/>
                        </p>                        
                    </div>
                  </div>
               </div>
              </div>
            </div>

您可以随时使用

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

在你的css中, 祝你好运。