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

Question

我有一个输入表单，左侧有一列包含输入标签，右侧一列包含输入元素。现在是一张 table (抱歉):

<tr>
  <td>Header</td>
  <td><input /></td>
</tr>

我有几个输入，我想采用以下形式:

<tr>
  <td>Header (Extra)</td>
  <td><input /> (<input />)</td>
</tr>

在第一种情况下，输入应该展开以填满整个列。在第二个中，我希望 2 个输入尽可能地扩展到相同的大小，并填充该列。

理想情况下，我的显示应该是这样的

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

这可能吗？也可以考虑将其转换为更具语义的 html。另请注意，如果可能，我希望所有“第 2 行”行都在 1 行上，它应该适用于灵活的表格宽度。

Answer 1

我不会为此使用 CSS，我只是添加第二个 <td>元素，但您必须使用一些额外的 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% 的结果适用于大多数情况。

Full JSFiddle Example