当收缩到一定宽度以下时，表会折叠

Question

您好我正在尝试使用固定标题创建一个表，但似乎无法使其正常工作...

我想知道为什么当桌子缩小到一定宽度以下并且如果有解决方法来修复它时桌子就会坍塌。

这是我的代码：

<table class="table table-striped table-fixed">
    <thead>
    <tr>
        <th class="col-md-1">Make</th>
        <th class="col-md-2">Model</th>
        <th class="col-md-3">Color</th>
        <th class="col-md-3">Year</th>
        <th class="col-md-3">Stuff</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="filterable-cell col-md-1">Ford</td>
        <td class="filterable-cell col-md-2">Escort</td>
        <td class="filterable-cell col-md-3">Blue</td>
        <td class="filterable-cell col-md-3">2000</td>
        <td class="filterable-cell col-md-3">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell col-md-1">Ford</td>
        <td class="filterable-cell col-md-2">Escort</td>
        <td class="filterable-cell col-md-3">Blue</td>
        <td class="filterable-cell col-md-3">2000</td>
        <td class="filterable-cell col-md-3">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell col-md-1">Ford</td>
        <td class="filterable-cell col-md-2">Escort</td>
        <td class="filterable-cell col-md-3">Blue</td>
        <td class="filterable-cell col-md-3">2000</td>
        <td class="filterable-cell col-md-3">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell col-md-1">Ford</td>
        <td class="filterable-cell col-md-2">Escort</td>
        <td class="filterable-cell col-md-3">Blue</td>
        <td class="filterable-cell col-md-3">2000</td>
        <td class="filterable-cell col-md-3">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell col-md-1">Ford</td>
        <td class="filterable-cell col-md-2">Escort</td>
        <td class="filterable-cell col-md-3">Blue</td>
        <td class="filterable-cell col-md-3">2000</td>
        <td class="filterable-cell col-md-3">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell col-md-1">Ford</td>
        <td class="filterable-cell col-md-2">Escort</td>
        <td class="filterable-cell col-md-3">Blue</td>
        <td class="filterable-cell col-md-3">2000</td>
        <td class="filterable-cell col-md-3">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell col-md-1">Ford</td>
        <td class="filterable-cell col-md-2">Escort</td>
        <td class="filterable-cell col-md-3">Blue</td>
        <td class="filterable-cell col-md-3">2000</td>
        <td class="filterable-cell col-md-3">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell col-md-1">Ford</td>
        <td class="filterable-cell col-md-2">Escort</td>
        <td class="filterable-cell col-md-3">Blue</td>
        <td class="filterable-cell col-md-3">2000</td>
        <td class="filterable-cell col-md-3">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell col-md-1">Ford</td>
        <td class="filterable-cell col-md-2">Escort</td>
        <td class="filterable-cell col-md-3">Blue</td>
        <td class="filterable-cell col-md-3">2000</td>
        <td class="filterable-cell col-md-3">2000</td>
    </tr>
  </tbody>
</table>

和css：

.table-fixed {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 200px; /* this can vary */
}

.table-fixed thead {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
}

.table-fixed tbody {
    overflow-y: scroll;
    display: inline-block;
}

.table-fixed thead > tr, .table-fixed tbody > tr {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.table-fixed th, .table-fixed tbody td {
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

以下是Bootply