title: Download HTML table colspan and rowspan no picked up
body: <p>I have the following HTML table:</p>
  
  <pre><code>&lt;a href="#" id ="download" role='button' class="button"&gt;Download&lt;/a&gt;
  &lt;div id="dvData" class="table-responsive"&gt;
      &lt;table class="table table-bordered" id="example"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
              &lt;th rowspan="3"&gt;Example&lt;/th&gt;
              &lt;th colspan="7"&gt;Larger Header&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr class="table_headers"&gt;
              &lt;th colspan="3"&gt;Sub Header 1&lt;/th&gt;
              &lt;th colspan="3"&gt;Sub Header 2&lt;/th&gt;
              &lt;th rowspan="2" class="align-middle"&gt;Sub Header 3&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr class="table_headers"&gt;
              &lt;th&gt;Sub sub header&lt;/th&gt;
              &lt;th&gt;Sub sub header&lt;/th&gt;
              &lt;th&gt;Sub sub header&lt;/th&gt;
              &lt;th&gt;Sub sub header&lt;/th&gt;
              &lt;th&gt;Sub sub header&lt;/th&gt;
              &lt;th&gt;Sub sub header&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt; Info&lt;/td&gt;
              &lt;td&gt; Info&lt;/td&gt;
              &lt;td&gt; Info&lt;/td&gt;
              &lt;td&gt; Info&lt;/td&gt;
              &lt;td&gt; Info&lt;/td&gt;
              &lt;td&gt; Info&lt;/td&gt;
              &lt;td&gt; Info&lt;/td&gt;
              &lt;td&gt; Info&lt;/td&gt;
              &lt;td&gt; Info&lt;/td&gt;
              &lt;td&gt; Info&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I have the following JavaScript to download the table:</p>
  
  <pre><code>function exportTableToCSV($table, filename) {//used to export tables
          var $headers = $table.find('tr:has(th)')
              ,$rows = $table.find('tr:has(td)')
              ,tmpColDelim = String.fromCharCode(11) // vertical tab character
              ,tmpRowDelim = String.fromCharCode(0) // null character
              ,colDelim = '","'
              ,rowDelim = '"\r\n"';
  
              var csv = '"';
              csv += formatRows($headers.map(grabRow));
              csv += rowDelim;
              csv += formatRows($rows.map(grabRow)) + '"';
  
              var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
  
          if (window.navigator.msSaveOrOpenBlob) {
              var blob = new Blob([decodeURIComponent(encodeURI(csv))], {
                  type: "text/csv;charset=utf-8;"
              });
              navigator.msSaveBlob(blob, filename);
          } else {
              $(this)
                  .attr({
                      'download': filename
                      ,'href': csvData
              });
          }
          function formatRows(rows){
              return rows.get().join(tmpRowDelim)
                  .split(tmpRowDelim).join(rowDelim)
                  .split(tmpColDelim).join(colDelim);
          }
          function grabRow(i,row){
  
              var $row = $(row);
              var $cols = $row.find('td'); 
              if(!$cols.length) $cols = $row.find('th');  
  
              return $cols.map(grabCol)
                          .get().join(tmpColDelim);
          }
          function grabCol(j,col){
              var $col = $(col),
                  $text = $col.text();
  
              return $text.replace('"', '""'); // escape double quotes
  
          }
      }
  $("#download").click(function (event) {
          outputFile = "example.csv"
          exportTableToCSV.apply(this, [$('#dvData &gt; table'), outputFile]);
      });
  </code></pre>
  
  <p>When I download the file the headers get messed up. The colspan and rowspan properties are not kept. How do I fix that?</p>
  
  <p>EDIT: Here is the fiddle <a href="https://jsfiddle.net/ALUW/2s1z9pa9/" rel="nofollow noreferrer">https://jsfiddle.net/ALUW/2s1z9pa9/</a></p>