Html 如何使用CSS让一个或多个元素填充剩余空间？

我有一个输入表单，左侧有一列包含输入标签，右侧有一列包含输入元素。现在是一张桌子（对不起）：

---

可能吗？还可以考虑将其转换为更具语义的html。还要注意的是，我希望所有的“第2行”尽可能放在一行上，它应该具有灵活的表格宽度。

我不会为此使用CSS，我只会添加第二个

元素，但您必须使用一些额外的CSS来表示宽度，等等

<tr>
  <td>Header</td>
  <td colspan="2"><input style="width: 99.6%" /></td>
</tr>
<tr>
  <td>Header (Extra)</td>
  <td><input style="width: 99.3%" /></td>
  <td>(<input style="width: 99.3%" />)</td>
</tr>

标题
收割台（额外）
()

我使用99.3%作为宽度，因为输入元素略有不同，100%会使其溢出边界。在我的经验中，我发现99.3%的人在大多数情况下都有效

---

如果不将括号放在自己的单元格中，我找不到正确格式化的方法

<table>
    <tr>
      <td>Header</td>
      <td colspan="4"><input /></td>
    </tr>
    <tr>
      <th>Target&nbsp;(Actual)</th>
      <td><input /></td>
      <td>&nbsp;(</td>
      <td><input /></td>
      <td>)</td>
    </tr>
</table>

table {
    width:27em;
}
table input {
    width:99%;
}

标题
目标（实际）
(
)
桌子{
宽度：27em；
}
表输入{
宽度：99%；
}

---

当我将表格宽度设置为95%左右时，浏览器可以很好地调整所有内容的大小。单元格上的一点填充可以防止括号和输入重叠。

在每个输入中放置一个带有“width:49%”（大约）的TD似乎也有效。它更干净，但也更脆弱。当弄乱宽度时，如果你没有使用精确的数量，任何方法都是脆弱的。@Chris Marasti Georg:你必须调整输入字段的宽度。如前所述，百分比很容易打破。除非您使用的是精确值（例如“100px”），否则在执行此操作时会遇到问题-moz框大小：边框框；-webkit框尺寸：边框框；宽度：100%

Row 1         _______________________
Row 2 (Extra) __________ (__________)

<tr>
  <td>Header</td>
  <td colspan="2"><input style="width: 99.6%" /></td>
</tr>
<tr>
  <td>Header (Extra)</td>
  <td><input style="width: 99.3%" /></td>
  <td>(<input style="width: 99.3%" />)</td>
</tr>

<table>
    <tr>
      <td>Header</td>
      <td colspan="4"><input /></td>
    </tr>
    <tr>
      <th>Target&nbsp;(Actual)</th>
      <td><input /></td>
      <td>&nbsp;(</td>
      <td><input /></td>
      <td>)</td>
    </tr>
</table>

table {
    width:27em;
}
table input {
    width:99%;
}