引导输入组在 Internet Explorer 中将表格推到超出屏幕宽度

Posted 2023-03-21

【中文标题】引导输入组在 Internet Explorer 中将表格推到超出屏幕宽度

【英文标题】：Bootstrap input group pushing table beyond screen width in Internet Explorer

【发布时间】：2018-12-28 21:03:11

【问题描述】：

我正在使用 Bootstrap 构建一个网站，为了保持一致的字段样式和指示输入单位，我大量使用了输入组。有一次，我不得不在表格中创建一个编辑表单。我考虑将它放在 Bootstrap 网格中，但由于数据本身确实是表格的，所以我将其设为 table：

<table class="table table-hover">
            <thead>
                <tr>
                    <th style="width: 32px;"></th>
                    <th style="width: 7em;"></th>
                    <th style="width: 7em;">Test 1</th>
                    <th style="width: 10em;">Test 2 </th>
                    <th style="width: auto;">Test 3</th>
                    <th style="width: 10em;">Test 4
                    <th style="width: auto;">Test 5 </th>
                    <th style="width: auto;">Alternative 1</th>
                    <th style="width: 10em;">Probability 1</th>
                    <th style="width: auto;">Alternative 2</th>
                    <th style="width: 10em;">Probability 2</th>
                </tr>
            </thead>
            <tbody>
            <tr  class="shareEditor">
                <input  type="hidden" value="1" />
                <input  type="hidden" value="7" />
                <input  type="hidden" value="0" />
                <input  type="hidden" value="2" />
                <td>
                </td>
                 <td>Test</td>
                <td>
            <input  type="hidden" value="True" /><input  type="hidden" value="1" />Test</td>
    <td><input class="form-control"  type="text" value="" /></td>
    <td>
        <div class="input-group">
            <input value="0" class="form-control" />
            <div class="input-group-append input-group-text">m3</div>
        </div>
    </td>
    <!-- Omitted -->
    </tr>            
  </tbody>
  </table>

这在 Chrome 和 Edge 中运行良好：输入字段会缩放它们的宽度，以便表格适合页面的宽度，只要可行。请参阅此 JSBin：http://jsbin.com/sozetategi 并尝试调整屏幕大小。

但是 Internet Explorer 11 想要使输入组具有固定宽度，将列推到超出 th 中指定的宽度并让表格水平滚动，即使在我的 1900x1200 分辨率屏幕上最大化也是如此。

这是 Bootstrap 中的错误，还是我需要一些替代类来使 IE 在这里正常运行？

【问题讨论】：

你试过.table-responsive Bootstrap 类吗？

@Senthe 不会改变任何东西。 jsbin.com/besagajopa/1/edit

@CompuChip，Flexbox 在 IE 11 中无法完美运行，尤其是 flex-wrap。尝试考虑另一种方法来完成这项工作。

【参考方案1】：

.input-group > .custom-file, .input-group > .custom-select, .input-group > .form-control 
width: 1vw;
max-width: 1vw;

在您的样式表中添加上面的 CSS 并自定义 vw。这会起作用。

【讨论】：

感谢您的回复。 “自定义vw”是什么意思？我可以摆弄数字，直到输入字段填满可用空间，但是（a）它们不会像我在其中一列中的 input-group-text 那样宽，并且（b）更重要的是，事情会我一调整窗口大小就开始看起来很奇怪。

@CompuChip 我的意思是改变vw 来改变视口宽度。要在调整窗口大小时控制视图，请使用媒体查询。

【参考方案2】：

这实际上是默认的table 行为。对于响应式网页设计来说，它们是一种痛苦。一个解决方案是像这样使用Responsive Bootstrap Tables：

<table class="table table-responsive">

这是您的工作 JS Bin，带有可调整大小的表格：https://jsbin.com/ginuditoke/1/edit?html,output