Menu
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 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>
633
I had the same problem, the thing is that you have to use:
<table border="1" style="border-collapse: collapse;"></table>
And that's it the boder property solves the problem.
69
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>";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With