Tabellenrahmen funktioniert nicht beim Exportieren in Excel

Question

HTML-Tabellenrahmen funktioniert nicht, nachdem das Excel-Blatt exportiert wurde. Es kommt als keine Grenze übertrifft sheet.The Ergebnis erzeugen, nachdem die Excel ist,

Aber mein erwartetes Ergebnis ist,

Ich mag es in zwei verschiedene Abschnitte aufgeteilt . Aber es funktioniert nicht im Excel-Blatt.

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>

Ich habe das nicht testen konnten Sie bitte dieses

versuchen