自动共享等宽非table布局固定解决方案？

Question

假设我有 n 个小部件要安装在同一个水平 space 中，占据屏幕宽度的 100%，例如

<table style="width:100%;text-align:center;table-layout:fixed">
  <tr>
    <td><input/></td>
    <td><span>TEXT</span></td>
    <td><select><option>Something</option></select></td>
  </tr>
</table>

它们共享相同的宽度，并在屏幕宽度变化时自动调整。

现在如果可以删除一个或某些小部件（显示：none）或根本不存在，则要求宽度不变，例如

<table style="width:100%;text-align:center;table-layout:fixed">
  <tr>
    <td><input style="display:none"/></td>
    <td><span>TEXT</span></td>
    <td></td>
  </tr>
</table>

注意 span 仍然在中间。 table-layout:fixed.

是可行的

我想知道是否有替代解决方案，它不使用 table 标签？很可能是 div 标签解决方案 display:grid 或 display:flex 也许？

P.S。没有宽度的硬编码数字，也没有计算，只是纯 CSS

Answer 1

您正在将 display:none 添加到 <td> 中的 <input>，因此您只隐藏了 <input> 而 <td> 仍然存在，但是空的。如果你不想有空 space，你必须 <td style="display:none"><input></td>

Answer 2

您可以将 <div> 与 display: flex; 一起使用。

HTML:

<div class="row">
  <div class="column">
    <input class="input" type="text">
  </div>
  <div class="column">
    <span class="span">TEXT</span>
  </div>
  <div class="column">
    <select class="select">
      <option>Something</option>
    </select> 
  </div>
</div>

CSS:

.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex: 1;
}

.input {
  display: none;
}

如您所见，当您将 display: none; 添加到 <input> 时，该列仍然存在，但为空。

自动共享等宽非table布局固定解决方案？

Non table layout fixed solution for auto shared equal width?

html

css

layout