Angular 2 IE document.execCommand('copy')

Question

I am working on Angular4/ HTML5 application with TypeScript. I have a table with tr, td, and th. I am doing copy to clipboard so that user can click a button to copy to clipboard and paste it in outlook, text editor or so. When pasting in Outlook I am having issue with IE. Chrome works fine. When I copy and paste into Outlook using IE browser my table is not copying correctingly. Please see below pics. I see gap between each td and each td/th.

IE:

Pasting into Outlook copying from IE. You can see gaps between tr, td/th cells

Pasting into Outlook copying from Chrome. It is smooth.

Please see below for my code. In order to work I gave inline styles. Please forgive for long code.

MyPage.ts

 private onCopyToClipboard(event: any, elementId: string, textOnly: boolean = false) {
        if (this.IsBrowserIe) {
            window.getSelection().removeAllRanges();
            document.execCommand('copy');
        }

        console.log(document.getElementById('copyDIV').innerHTML);           
        const range = document.createRange();
        range.selectNode(document.getElementById('copyDIV'));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
        var successful = document.execCommand('copy');

        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copying text command was ' + msg);
        window.getSelection().removeAllRanges();

    }

MyPage.html

<div id="copyDIV">                
                <table style="font-family:Calibri,Arial,Helvetica,sans-serif ;font-size:12px ;line-height:1em ;border: 1px solid black ; border-left: 0; border-right: 0">
                    <tbody>
                        <tr style="height:30px;">
                            <th style="background-color: gray; color: white; font-weight: bold; vertical-align: middle;
                                white-space: nowrap;word-wrap: none; border-bottom: 1px dotted silver;text-align: left;                             
                                height: 27px;
                                line-height: 27px; 
                                border: 0px;
                                border-bottom: 1px dotted silver;
                                padding: 0px;
                                padding-left:8px;" colspan="4" >Employee Salary </th>
                        </tr>

                        <tr style="height:29px;">
                            <th style=" background-color: gray;
                                color: white;
                                font-weight: bold;
                                vertical-align: middle;
                                white-space: nowrap;
                                text-align: center;
                                border: 0px;              
                                border-bottom: 1px dotted silver;"> Department</th>

                            <th style=" background-color: gray;
                                color: white;
                                font-weight: bold;
                                vertical-align: middle;
                                white-space: nowrap;
                                text-align: center;
                                border: 0px;              
                                border-bottom: 1px dotted silver;">March</th>

                            <th style=" background-color: gray;
                                color: white;
                                font-weight: bold;
                                vertical-align: middle;
                                white-space: nowrap;
                                text-align: center;
                                border: 0px;              
                                border-bottom: 1px dotted silver;">April</th>

                            <th style=" background-color: gray;
                                color: white;
                                font-weight: bold;
                                vertical-align: middle;
                                white-space: nowrap;
                                text-align: center;
                                border: 0px;              
                                border-bottom: 1px dotted silver;">Grand Total</th>

                        </tr>
                        <tr style="height:22px;" class="ng-star-inserted">
                            <td class="distributionTableFirstRowFirstCellNoBorder">Name1</td>
                            <td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
                             border-bottom: 1px dotted gray;
                             border-left: 0.25px solid silver ;
                             border-right: 0.25px solid silver " class="distributionTableCellNoBorder">4,400.00</td>
                            <td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
                            border-bottom: 1px dotted gray;border-left: 0.25px solid silver ;
                            border-right: 0.25px solid silver " class="distributionTableCellNoBorder">
                            </td>
                            <td style="text-align: right;" class="distributionTableFirstRowLastCellNoBorder">4,400.00</td>
                        </tr>
                        <tr style="height:22px;">
                            <td class="distributionTableFirstRowFirstCellNoBorder">Name2
                            </td>
                            <td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
                            border-bottom: 1px dotted gray;border-left: 0.25px solid silver ;
                            border-right: 0.25px solid silver " class="distributionTableCellNoBorder">
                                2,000.00
                            </td>
                            <td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
                             border-bottom: 1px dotted gray;border-left: 0.25px solid silver ; border-right: 0.25px solid silver " 
                             class="distributionTableCellNoBorder">
                                2,200.00
                            </td>
                            <td style="text-align: right;" class="distributionTableFirstRowLastCellNoBorder">
                                4,200.00
                            </td>
                        </tr>
                        <tr style="height:22px;" >
                            <td class="distributionTableFirstRowFirstCellNoBorder ">Name3
                            </td>
                            <td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
                            border-bottom: 1px dotted gray;border-left: 0.25px solid silver ;
                            border-right: 0.25px solid silver " class="distributionTableCellNoBorder ">
                                2,300.00
                            </td>
                            <td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
                            border-bottom: 1px dotted gray;border-left: 0.25px solid silver ;
                            border-right: 0.25px solid silver " class="distributionTableCellNoBorder">
                                2,500.00
                            </td>
                            <td style="text-align: right;" class="distributionTableFirstRowLastCellNoBorder">
                                4,800.00
                            </td>
                        </tr>
                        <tr style="height:22px;">
                            <td class="distributionTableFirstRowFirstCell4Line" style="border-bottom: 1px solid black">
                                Name4
                            </td>
                            <td class="distributionTableCell4Line " style="margin:0px; border-top: 1px dotted gray ;
                                    border-left: 0.25px solid silver ;border-right: 0.25px solid silver;
                                    border-bottom: 1px solid black;text-align:right;">
                                250.00
                            </td>
                            <td class="distributionTableCell4Line" style="margin:0px; border-top: 1px dotted gray ;
                                    border-left: 0.25px solid silver ;border-right: 0.25px solid silver;border-bottom: 1px solid black;text-align:right;">
                                500.00
                            </td>
                            <td class="distributionTableFirstRowLastCell4Line" style="border-bottom: 1px solid black;text-align: right;">
                                750.00
                            </td>

                        </tr>
                        <tr style="height:22px;" class="ng-star-inserted">
                            <td class="distributionTableFirstRowFirstCellNoBorder">Name5
                            </td>
                            <td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
                            border-bottom: 1px dotted gray;border-left: 0.25px solid silver ;
                            border-right: 0.25px solid silver " class="distributionTableCellNoBorder">
                                17,700.00
                            </td>
                            <td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
                            border-bottom: 1px dotted gray; border-left: 0.25px solid silver ;
                            border-right: 0.25px solid silver " class="distributionTableCellNoBorder">
                                28,200.00
                            </td>
                            <td style="text-align: right;" class="distributionTableFirstRowLastCellNoBorder">
                                45,900.00
                            </td>
                        </tr>
                        <tr style="height:22px;">
                            <td class="distributionTableFirstRowFirstCellNoBorder">Name6
                            </td>
                            <td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
                            border-bottom: 1px dotted gray;border-left: 0.25px solid silver ;
                            border-right: 0.25px solid silver " class="distributionTableCellNoBorder">
                                9,000.00
                            </td>
                            <td style="margin:0px; text-align:right; border-top: 1px dotted gray ;
                            border-bottom: 1px dotted gray;border-left: 0.25px solid silver ;
                            border-right: 0.25px solid silver " class="distributionTableCellNoBorder">
                                28,800.00
                            </td>
                            <td style="text-align: right;" class="distributionTableFirstRowLastCellNoBorder">
                                37,800.00
                            </td>
                        </tr>
                        <tr style="height:22px;">
                            <th class="distributionTableFooterCellFirst" style="text-align:right;border-bottom: 1px solid black;
                            border-top: 1px solid black;border-left: 0.25px solid silver; border-right: 0.25px solid silver;">Grand Total</th>

                            <th class="distributionTableFooterCell tablelightGrayCell" style="text-align:right;border-bottom: 1px solid black;
                            border-top: 1px solid black;border-left: 0.25px solid silver; border-right: 0.25px solid silver;">60,000.00</th>

                            <th class="distributionTableFooterCell tablelightGrayCell" style="text-align:right;border-bottom: 1px solid black;
                            border-top: 1px solid black;border-left: 0.25px solid silver; border-right: 0.25px solid silver;">100,000.00</th>

                            <th class="distributionTableFirstRowLastCell3 " style="text-align:right;border-bottom: 1px solid black;border-top: 1px solid black;
                            border-left: 0.25px solid silver; border-right: 0.25px solid silver;">160,000.00</th>

                        </tr>
                    </tbody>
                </table>
            </div>

UPDATE 1: Was able to remove the gaps between tr, td/th using border-collapse: collapse; in my styles for my table which is in copyDIV. Now I need to work on stopping table to take up whole width in Outlook.

UPDATE 2:

I took the project from other developer and after carefully go through the styles in mystyles.scss file I saw few places where we had width:100%. I removed them and now it is good.