当动态添加一行输入框时，表格中的列宽会发生变化答案

【问题标题】：The width of columns in a table change when a row of input boxes is added dinamically当动态添加一行输入框时，表格中的列宽会发生变化
【发布时间】：2018-01-08 07:35:12
【问题描述】：

The table before the row with input-boxes is shown 如上图所示，第一行包含一个表格，一个按钮用于显示/隐藏包含输入框的行，如下图所示。

The table where the row with input boxes is shown 问题是当显示包含输入框的行时，列的宽度会发生变化。（从图片可以看出前后列宽的差异）
输入框的宽度设置为 100%。填充和边框也没有改变，只有 td 的宽度。所以问题是，我怎样才能在不设置固定宽度的情况下保持列的相同宽度，如下面的代码所示？

td { 宽度：50px;}

还有添加

white-space: nowrap

不起作用！

这是显示带有输入框的行的代码部分。

<tr v-if="showFilters">
    <td v-for="key in filterKeys" v-if="key.visible">
        <div class="input-group">
          <pf-text-field v-model="key.value" tooltip="Filter"> </pf-text-field>
        </div>
    </td>
</tr>

【问题讨论】：

标签： javascript html css vue.js

【解决方案1】：

你尝试过使用弹性属性吗？

td {
 display : flex;
}

理论上，独生子女的默认尺寸应该是 100%...您可以添加填充，它会适应！

【讨论】：

【解决方案2】：

如果您不告诉浏览器表格单元格的首选大小，它将尝试根据每列中最宽表格单元格的宽度按比例调整宽度。这些是带有输入字段的表格单元格，一旦显示（它们的宽度：100%）

我假设您只是希望某些列比其他列小，因为它们包含较小的数据。您可以为此使用基于 % 的宽度。可选的 min-width 或 max-width 也可能很有用，以防您的网站是响应式的并且应该始终保持一些最小宽度。例如

td {
  width: 25%;
  min-width: 50px;
}

提示：使用不同的表格布局可能会防止一些奇怪的行为，以防某些单元格变得太大：

table {
  table-layout: fixed;
}

【讨论】：