Search code examples
javascriptcssexport-to-excel

Excel Export as html fails to show borders in Excel 2016

I am exporting html to an Excel xls file using JavaScript as in following demo: http://js.do/sun21170/84913. I have used Google Chrome to run this demo but it should run in Edge or IE or FireFox also.

The problem is that when I open the exported file in Excel 2016, it shows without any borders even though there is CSS in the exported html to show borders.

Question: Is there a way to show the borders when html file opens in Excel? The same html that opens in Excel, renders with borders in a browser, so the CSS for borders is correct. The demo at http://js.do/sun21170/84913 also shows the html being saved in Excel file.

Html Table with missing Borders

HTML saved as xls file

<html>
   <head>
      <style> table, td {border:1px solid black} table {border-collapse:collapse}</style>
   </head>
   <body>
      <table>
         <tr>
            <td>Product</td>
            <td>Customer</td>
         </tr>
         <tr>
            <td>Product1</td>
            <td>Customer1</td>
         </tr>
         <tr>
            <td>Product2</td>
            <td>Customer2</td>
         </tr>
         <tr>
            <td>Product3</td>
            <td>Customer3</td>
         </tr>
         <tr>
            <td>Product4</td>
            <td>Customer4</td>
         </tr>
      </table>
   </body>
</html>
Solution

  • I finally found the answer after a lot of research. It seems that Excel 2016 does not like a border thickness of 1px; anything greater than 1px like 2px or 3px or 4px works. Why Excel 2016 behaves like this is unclear to me.

    A demo showing this is at following URL: http://js.do/sun21170/84961

    Also, if the border thickness is specified in any other units like em or pt or mm, then a thickness of 1em or 1mm or 1pt or 1mm or .5mm will work.

    Even border thickness using pre-defined values like thin or medium or thick works in Excel 2016.

    So, the lesson I have learnt is to never specify border thickness of 1 px when using Excel.

    Following CSS are different styles that worked in Excel 2016 to create a border.

    Border thickness greater than 1px WORKS

    var table = "<html><head><style> table, td {border:2px solid black}
            table {border-collapse:collapse}</style></head><body><table><tr>";

    Border thickness of 1pt WORKS

    var table = "<html><head><style> table, td {border:1pt solid black}
            table {border-collapse:collapse}</style></head><body><table><tr>";

    Border thickness of 1mm WORKS

    var table = "<html><head><style> table, td {border:1mm solid black}
            table {border-collapse:collapse}</style></head><body><table><tr>";

    Border thickness of 1em WORKS

    var table = "<html><head><style> table, td {border:1em solid black}
            table {border-collapse:collapse}</style></head><body><table><tr>";

    Border thickness of thin WORKS

    var table = "<html><head><style> table, td {border:thin solid black}
            table {border-collapse:collapse}</style></head><body><table><tr>";