Question

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

The table where the row with input boxes is shown 问题是当显示包含输入框的行时，列的宽度会更改。（从图像中可以看出宽度列的差异，前后）并且输入框的宽度设置为100％。填充和边框也不会改变，只有td的宽度。所以问题是，如何设置相同宽度的列，而不设置固定宽度，如下面的代码所示？

td { width: 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>

Answer 1

您是否尝试过使用flex属性？

td {
 display : flex;
}

理论上，单个孩子的默认大小应该是100％...你可以添加填充，它会适应！

Answer 2

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

我假设你只是希望某些列比其他列小，因为它们包含较小的数据。您可以使用基于％的宽度。可选的最小宽度或最大宽度也可能有用，以防您的站点响应并且应始终保留一些最小宽度。 E.g。

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

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

table {
  table-layout: fixed;
}

当一行输入框以动态方式添加时，表格中列的宽度会发生变化

2 个答案: