响应表不会在足够高的浏览器宽度下更改

Question

我有一个使用bootstrap的表：

<table class="table table-bordered">
                            <tr>
                                <th class="text-center" colspan="4">
                                    DRUG INFO
                                </th>
                            </tr>
                            <tr>
                                <td class="col-md-3"><span>{{item.fields[18].displayName}}</span></td>
                                <td class="col-md-3" colspan="2"><span>{{item.fields[25].displayName}}</span></td>
                                <td class="col-md-3"><span>{{item.fields[14].displayName}}</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"></div>
                                </td>
                                <td colspan="2">
                                    <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"></div>
                                </td>
                                <td>
                                    <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"></div>
                                </td>

                            <tr>
                                <td colspan="2">UD_UU_PKG</td>
                                <td colspan="2">SHORT_CYCL</td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"></div>

                                </td>
                                <td colspan="2" class="text-center">
                                    <div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"></div>
                                </td>
                            </tr>

                        </table>

我的问题是这个表的响应属性没有足够早地修复布局（以及足够高的像素宽度）。

随着宽度减小，表格应该移动到页面底部以进行响应式设计：

但是有一个宽度不会发生的窗口，表格与它的父级重叠：

我一直在寻找自定义媒体查询，但此部分没有。我也一直在处理列宽，但是由于某些原因，减少它们会使问题变得更糟。

我该如何解决这个问题？