I'm trying to download all content inside div tag using javascript

Here is the markup:

<div class="col-md-12" id="invoice">
    <div class="row">
        <div class="col">
        
            <p>My Name</p>
            <p>My Email</p>
            <p>My Address</p>
        </div>
        <div class="col">
            <h6>Number</h6>
            <br />
            <p>2021</p>
            <br />
            <h6>Another Number</h6>
            <br />
            <p>2021</p>
        </div>
        <div class="col">
            <h6>Date</h6>
            <br />
            <p>9/14/2021</p>
            <br />
            <h6>Terms</h6>
            <br />
            <p>30</p>
        </div>
    </div>


    <table class="table-bordered">
        <thead>
            <tr>
                <th>th1</th>
                <th>th2</th>
                <th>th3</th>
                <th>th4</th>
            </tr>
        </thead>
        <tbody>
           <tr>
               <td>
                 content1
               </td>
               <td>
                   content2
               </td>
               <td>
                   content3
               </td>
               <td>
                   content4
               </td>
               
           </tr>
        </tbody>

    </table>
 
</div>

Here is my javascript code:

    function downloadMyElement() {
   var MyElement=document.getElementById('invoice').innerHTML;
        var filename = "MyElement.html";
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(MyElement));
        element.setAttribute('download', filename);
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);

    }

the result:

the table didn't display and not the same design I think my code in javascript didn't read the tags.

How can I get the same design of my markup?