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

Question

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!

Answer 1

I've created an issue on Bootstrap's Github and Mark said not to use the row and col classes on tables, because they are flexboxes and thus break the display properties of tables.