title: Generating HTML Table from Grid with rowspan and colspan (gridstack)
body: <p>I have a gui grid builder, which acts like a dashboard. For that I use gridstack javascript library.
  So I have stored the coordinates and values within my database how gridstack wants it.
  The format is for each value a x,y coordinate and a width/height data.
  all parameters are NOT pixel, instead they represent the cells
  for example the dataset:</p>
  
  <pre><code>{x: 1, y: 2, height: 2, width: 3}
  </code></pre>
  
  <p>Will generate a rectangle started at grid row 2 and at the column 1 and is 2 rows height and 3 columns width.</p>
  
  <p>I think I do not need to provide example data, because they can be different everytime (user x creates dashboard in the way of A and user y in the way of B). Important is that cells can not overlap.
  So when we have a data entry at x:0,y:1, width: 4, height: 1 it is not possible that another data entry is at x: 2, y: 1 (width and height does not matter here)</p>
  
  <p>That's for my data structure.</p>
  
  <p>I can display it normaly with div's and absolute positioning, thats not the problem, the problem is I need to print this page as a pdf.
  For such task I use wkhtml2pdf. What it does is simple. I provide an url to this programm, it opens it with I think it was the webkit engine, get all the data and print that page like you do with "print this webpage" within a browser.
  However this tool I assume can not handle absolute positioning correctly.</p>
  
  <p>I tested the printing with a static html table how I need it and this worked very well.</p>
  
  <p>So what I want to do is, generating a HTML-Table based on my data structur with all the row and colspan I need to generate the exact visual output within the printed pdf as when visiting our site.</p>
  
  <p>An answer "Why not just clicking 'print' within the browser" is not acceptable, because I need a downloadable pdf file which is very different in surrounding html and css as the normal page, I already tried in the first place to just use a "print layout" which can be used by the browser, but this is not possible, due to the fact that each browser handles it a bit different and it didn't worked how expected.</p>
  
  <p>To generate a bit html table stuff within javascript is not a problem, my real problem is how I calculate which td's and tr's I need to create in order to generate a valid table which looks how it should be.</p>
  
  <p>To give a quick test data:</p>
  
  <pre><code>[
  {"title":"image1","y":0,"x":0,"width":3,"height":7,"configuration":{"title":"22344"}},
  {"title":"Headline","y":0,"x":3,"width":2,"height":1,"configuration":{"text":"Headline"},
  {"title":"image2","y":1,"x":3,"width":2,"height":6,"configuration":{"title":"Fdsfsd"}},
  {"title":"text1","y":0,"x":5,"width":2,"height":6,"configuration":{"text":"bzend-framework-php/Zend/View.php:108"},
  {"title":"text2","y":7,"x":3,"width":2,"height":4,"configuration":{"text":"Lorem ipsum dolor sit amet"}
  ]
  </code></pre>
  
  <p>Can anybody help me to create this damn table, I really have no glue to accomplish this task.</p>
  
  <p>Valid languages are php and javascript with jquery library.</p>
  
  <p>Thank you,
  prdatur</p>