Table border is not working on Export to excel - html

Question

HTML table border is not working after exporting the excel sheet. It is coming as no border excel sheet.The result after generate the excel is,
But my expected result is,
I want to split it into two different sections. But it is not working in excel sheet.
JSFIDDLE
$("[id$=myButtonControlID]").click(function(e) {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('div[id$=divTableDataHolder]').html()));
e.preventDefault();
});
table {
border: 1px solid black;
}
th {
border: 1px solid black;
padding: 5px;
background-color: skyblue;
color: white;
}
td {
border: 1px solid black;
padding: 5px;
color: green;
}
<button id="myButtonControlID">Export Table data into Excel</button>
<div id="divTableDataHolder">
<table>
<tr>
<th>ColumnOne </th>
<th>ColumnTwo</th>
</tr>
<tr>
<td>row1ColValue1</td>
<td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td>
<td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td>
<td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td>
<td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td>
<td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td>
<td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td>
<td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td>
<td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td>
<td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td>
<td>row2ColValue2</td>
</tr>
</table>
</div>

Answer 1

$("[id$=myButtonControlID]").click(function(e) {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent( $('div[id$=divTableDataHolder]').html()));
e.preventDefault();
});
table
{
border: 1px solid black;
}
th
{
border: 1px solid black;
padding: 5px;
background-color:skyblue;
color: white;
}
td
{
border: 1px solid black;
padding: 5px;
color: green;
}
<button id="myButtonControlID">Export Table data into Excel</button>
<div id="divTableDataHolder">
<table border="1">
<tr><th>ColumnOne </th><th>ColumnTwo</th></tr>
<tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr>
</table>
</div>
I didn't test this could you please try this

Answer 2

is it worked.
i modifiy this
$("[id$=myButtonControlID]").click(function(e) {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent( $('div[id$=divTableDataHolder]').html()));
e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<button id="myButtonControlID">Export Table data into Excel</button>
<div id="divTableDataHolder">
<table border="1" style="border-collapse: collapse;">
<tr><th>ColumnOne </th><th>ColumnTwo</th></tr>
<tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr>
<tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr><tr>
<td>row1ColValue1</td><td>row1ColValue2</td>
</tr>
<tr>
<td>row2ColValue1</td><td>row2ColValue2</td>
</tr>
</table>
</div>