Flexbox问题出现在IE11上的表格上

Question

我在IE11上遇到了一个基于flexbox的表格的问题。下面是它在其他浏览器中的外观：

​

​

这是它在IE11上的样子：

​

​

请参阅代码：

<div class="submasthead__items">
    <table class="submasthead-item__table">
        <thead>
        <tr>
            <th>Qualifying deposits of:</th>
            <th>Eligible for a bonus of:</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                $20,000 - $49,999
            </td>
            <td class="text--brightRed">
                $200
            </td>
        </tr>
        <tr>
            <td>
                $50,000 - $99,999
            </td>
            <td class="text--brightRed">
                $300
            </td>
        </tr>
        <tr>
            <td>
                $100,000+
            </td>
            <td class="text--brightRed">
                $500
            </td>
        </tr>
        </tbody>
    </table>
</div>

以下是我使用flexbox的SCSS部分：

&__items {
    .submasthead--SM1 & {
        margin: 2em 0;
        @include respond-to($medium) {
            margin: 1.3em 0;
            display: flex;
            justify-content: space-around;
        }
    }
}

&__subcopy {
    max-width: 925px;
    margin: 0 auto;
    .submasthead--SM1 & {
        @include respond-to($medium) {
            max-width: none;
            margin: 0;
            display: flex;
            justify-content: center;
        }
    }
    p {
        font-size: $copy-small;
        width: 95%;
        @include respond-to($medium) {
            width: 45%;
        }
    }
}


&-item {
    &__table {
        border-collapse: collapse;
        width: 98%;
        @include respond-to($medium) {
            width: 400px;
            max-width: 100%;
            min-width: 300px;
        }
        td {
            .submasthead--SM1 & {
                flex: 1;
                text-align: left;

                @include respond-to($medium) {
                    text-align: center;
                }
            }
        }
        th {
            padding: 0.4em 0.5em;
            font-size: $copy-small;
            line-height: 1.25;
            .submasthead--SM1 & {
                text-align: left;
                flex: 1;

                @include respond-to($medium) {
                    text-align: center;
                    font-size: $copy-regular;
                }
            }
        }
        tr {
            border: 1px $color-coolGrayLight solid;

            .submasthead--SM1 & {
                display: flex;
                td + td {
                    text-align: center;
                    font-weight: bold;
                }

                *:nth-child(1) {
                    flex-basis: 20%;

                    @include respond-to($medium) {
                        flex-basis: 0;
                    }
                }

                @include respond-to($medium) {
                    align-items: center;
                }
            }
        }
        tbody {
            tr:nth-child(odd) {
                background-color: $color-coolGrayLight;
            }
        }
    }
}

我创建了一个codepen，以防您想看一下：https://codepen.io/anon/pen/pZvXoJ

请参阅此代码，以防其他代码不起作用：https://codepen.io/maketroli/pen/pZvXoJ

你知道我的代码可能出了什么问题吗？