Is there a div to table converter?

Question

I have a huge amount of structured HTML that I need to convert to to be able to render it inside of pdfkit.

I'm using pdfkit and it seems it dosn't play well with layouts but does play well with grids.

Any help would be greatly appreciated!

<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>

Can you post any sample code please? You may want to start by looking at an API like https://datatables.net/ — Adam, Apr 11 '17 at 22:23
@Adam added some examples. There are a lot of variations so take this and multiply it by like 100. Arg. — cph, Apr 11 '17 at 22:27
I was quite interested in this, as I have this need, and cannot find a tool to copy div based tables into Excel yet. There is a whole discussion on this here, might be useful: https://www.webmasterworld.com/html/4673933.htm — Craig Lambie, Jan 03 '18 at 10:50

score 2 · Accepted Answer · answered Apr 12 '17 at 00:17

2

you can always use

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

in your css, Good luck.

answered Apr 12 '17 at 00:17

Harel Levy

627
6
7

works pretty nice in firefox but not in chrome – sam Mar 16 '19 at 07:07

Is there a div to table converter?

1 Answers1