html - 表格边框不适用于导出到 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

$("[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>

我没有测试这个，你可以试试这个吗