Загружать HTML-таблицу бок о бок при сохранении в Excel

Question

У меня есть пара HTML-таблиц на странице, которые я пытаюсь сохранить как Excel. Я могу сохранить их в Excel, но проблема в том, что я не могу загружать их рядом, они просто появляются один за другим.

Вот HTML

<table id="1" style="display: inline-block;">
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
    <tr><td>Geronimo</td><td>26</td><td>France</td></tr>
    <tr><td>Natalia</td><td>19</td><td>Spain</td></tr>
    <tr><td>Silvia</td><td>32</td><td>Russia</td></tr>
</table>

<table id="2" style="float: left;">
    <tr><th>Pet</th><th>Breed</th><th>Type</th></tr>
    <tr><td>Roscoe</td><td>Pug</td><td>Dog</td></tr>
    <tr><td>Polly</td><td>Parrot</td><td>Bird</td></tr>
    <tr><td>Whiskers</td><td>Calico</td><td>Cat</td></tr>
</table>
<br/>
<table id="3">
    <tr><th>Pet</th><th>Breed</th><th>Type</th></tr>
    <tr><td>Roscoe</td><td>Pug</td><td>Dog</td></tr>
    <tr><td>Polly</td><td>Parrot</td><td>Bird</td></tr>
    <tr><td>Whiskers</td><td>Calico</td><td>Cat</td></tr>
</table>
  <input type="button" id="btnExport" title="excel" value="Export" />

Вот клиентский скрипт

$("#btnExport").click(function () {
    fnExcelReport();
});


function fnExcelReport()
{
    var tab_text = "";
    var tab_text= tab_text + "<table border='2px'><tr bgcolor='#87AFC6'>";
    var textRange; var j=0;
    tab = document.getElementById('1'); // id of table

    for(j = 0 ; j < tab.rows.length ; j++) 
    {     
        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
        //tab_text=tab_text+"</tr>";
    }

    tab_text=tab_text+"</table>";

    var tab_text= tab_text + "<table border='2px'><tr bgcolor='#87AFC6'>";
    var textRange; var j=0;
    tab = document.getElementById('2'); // id of table

    for(j = 0 ; j < tab.rows.length ; j++) 
    {     
        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
        //tab_text=tab_text+"</tr>";
    }

    tab_text=tab_text+"</table>";


    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE "); 

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
    {
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
    }  
    else                 //other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  

    return (sa);
}

Наконец, вот ссылка на скрипку Fiddle

Может кто-нибудь, пожалуйста, взгляните и дайте мне знать, как можно, чтобы таблицы, расположенные рядом в пользовательском интерфейсе, выглядели одинаково в Excel.

Answer 1

Таким образом, в основном это может быть достигнуто с помощью html трюка .. добавление мастер-таблицы с внутренним td для хранения таблиц.

<table> 
   <tr> 
      <td>table 1 code with all the html</td>
      <td>table 2 code with all the html</td>
   </tr>
</table>