Question

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

<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

Answer 2

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

<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%;
}

当我将表格宽度设置为95％时，所有内容都可以通过浏览器很好地调整大小。单元格上的一些填充使括号和输入不重叠。

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

2 个答案: