表格边框无法导出到Excel

Question

导出Excel工作表后，

HTML表格边框无效。它是没有边框excel表。生成excel后的结果是，

但我的预期结果是，

我想把它分成两个不同的部分。但它不适用于excel表。

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

＆＃13;

＆＃13;

$("[id$=myButtonControlID]").click(function(e) {
    window.open('data:application/vnd.ms-excel,' + encodeURIComponent( $('div[id$=divTableDataHolder]').html()));
    e.preventDefault();
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我没有测试过这个，请你试试这个