填充其余的单元格宽度

Question

具有以下HTML代码段

...
<td>
<input id="foo" type="text" style="width:20%">
&nbsp;
<input id="bar" type="text">
</td>
...

如何使bar占据表格单元格的其余空间？制作width:100%不起作用，因为它处理了表格单元格的100％，进入下一行。

谢谢！

Answer 1

使用width: 80%;。您可能仍需要将页边距设置为0，并可能使用box-sizing属性。

Answer 2

您可以使用flexbox将默认输入行为设置为grow或“填充”剩余空间。只需定义父级<td>到flex的显示类型以及每个子元素<input>到flex-grow: 1的增长行为

td { display: flex; }
input { flex-grow: 1; }
input#foo { width: 20%; }

<table>
  <tbody>
    <tr>
      <td>
        <input id="foo" type="text" />
        <input id="bar" type="text" />
      </td>
    </tr>
  </tbody>
</table>