title: Retain HTML table styling after exporting to excel using javascript/jquery
body: <p>I have a beautiful looking html table from jsfiddle which i will love to convert to excel document. My problem is after creating the excel file. The table loses it styles in excel such as font color, padding, background color. etc. is there a fix for this?</p>
  
  <p><strong>HTML</strong>
  </p>
  
  <pre><code>&lt;table id="testTable" summary="Code page support in different versions of MS Windows." rules="groups" frame="hsides" border="2"&gt;&lt;caption&gt;CODE-PAGE SUPPORT IN MICROSOFT WINDOWS&lt;/caption&gt;&lt;colgroup align="center"&gt;&lt;/colgroup&gt;&lt;colgroup align="left"&gt;&lt;/colgroup&gt;&lt;colgroup span="2" align="center"&gt;&lt;/colgroup&gt;&lt;colgroup span="3" align="center"&gt;&lt;/colgroup&gt;&lt;thead valign="top"&gt;&lt;tr&gt;&lt;th&gt;Code-Page&lt;br&gt;ID&lt;/th&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;ACP&lt;/th&gt;&lt;th&gt;OEMCP&lt;/th&gt;&lt;th&gt;Windows&lt;br&gt;NT 3.1&lt;/th&gt;&lt;th&gt;Windows&lt;br&gt;NT 3.51&lt;/th&gt;&lt;th&gt;Windows&lt;br&gt;95&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;1200&lt;/td&gt;&lt;td style="background-color: #00f; color: #fff"&gt;Unicode (BMP of ISO/IEC-10646)&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;*&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;1250&lt;/td&gt;&lt;td style="font-weight: bold"&gt;Windows 3.1 Eastern European&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;1251&lt;/td&gt;&lt;td&gt;Windows 3.1 Cyrillic&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;1252&lt;/td&gt;&lt;td&gt;Windows 3.1 US (ANSI)&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;1253&lt;/td&gt;&lt;td&gt;Windows 3.1 Greek&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;1254&lt;/td&gt;&lt;td&gt;Windows 3.1 Turkish&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;1255&lt;/td&gt;&lt;td&gt;Hebrew&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;1256&lt;/td&gt;&lt;td&gt;Arabic&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;1257&lt;/td&gt;&lt;td&gt;Baltic&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;1361&lt;/td&gt;&lt;td&gt;Korean (Johab)&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;**&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;437&lt;/td&gt;&lt;td&gt;MS-DOS United States&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;708&lt;/td&gt;&lt;td&gt;Arabic (ASMO 708)&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;709&lt;/td&gt;&lt;td&gt;Arabic (ASMO 449+, BCON V4)&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;710&lt;/td&gt;&lt;td&gt;Arabic (Transparent Arabic)&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;720&lt;/td&gt;&lt;td&gt;Arabic (Transparent ASMO)&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;X&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body
  {
      font-size: 12pt;
      font-family: Calibri;
      padding : 10px;
  }
  
  table
  {
      border: 1px solid black;
  
  }
  th
  {
      border: 1px solid black;
      padding: 5px;
      background-color:grey;
      color: white;
  
  }
  td
  {
      border: 1px solid black;
      padding: 5px;
  }
  
  input
  {
      font-size: 12pt;
      font-family: Calibri;
  }
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>var tableToExcel = (function() {
    var uri = 'data:application/vnd.ms-excel;base64,'
      , template = '&lt;html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"&gt;&lt;head&gt;&lt;!--[if gte mso 9]&gt;&lt;xml&gt;&lt;x:ExcelWorkbook&gt;&lt;x:ExcelWorksheets&gt;&lt;x:ExcelWorksheet&gt;&lt;x:Name&gt;{worksheet}&lt;/x:Name&gt;&lt;x:WorksheetOptions&gt;&lt;x:DisplayGridlines/&gt;&lt;/x:WorksheetOptions&gt;&lt;/x:ExcelWorksheet&gt;&lt;/x:ExcelWorksheets&gt;&lt;/x:ExcelWorkbook&gt;&lt;/xml&gt;&lt;![endif]--&gt;&lt;/head&gt;&lt;body&gt;&lt;table&gt;{table}&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;'
      , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
      , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
    return function(table, name) {
      if (!table.nodeType) table = document.getElementById(table)
      var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
      window.location.href = uri + base64(format(template, ctx))
    }
  })()
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/0ur83.jpg" alt="BEFORE CONVERTING TO EXCEL"></p>
  
  <p><img src="https://i.stack.imgur.com/NYc04.jpg" alt="AFTER CONVERSION"></p>