Bootstrap 4 table column width not formatting correctly in IE11 and Microsoft Edge

Has anyone encountered an issue with Bootstrap 4 table columns not being formatted correctly when using IE11 or Microsoft Edge?

Please check out the fiddle -- https://jsfiddle.net/vqazpa15/

(This doesn't work in IE11 / Edge but works in Firefox/Chrome)

<table class="table">
    <thead>
        <tr class="row">
            <th class="col-2">column 1</th>
            <th class="col-3">column 2</th>
            <th class="col-7">column 3</th>
        </tr>
    </thead>
</table>

(This works in all browsers that I tested)

<div class="row">
    <div class="col-2">column 1</div>
    <div class="col-3">column 2</div>
    <div class="col-7">column 3</div>
</div>

There are two examples in the fiddle. The first example the content is wrapped in a table. The second the content wrapped in a div. As you can see both examples format just fine in Firefox and Chrome but in IE11 and Edge only the 'div' example formats properly -- the table gets all screwy.

Does anyone know what's going on??

Thanks in advance!