html - 使文本区域填充剩余的 td 而不会溢出到新行

Question

这是我的 HTML：

<table>
  <tr>
    <td colspan="2">Name: <input type="text" name="member_name" style="width: 100%" /></td>
  </tr>
  <tr>
    <td>Phone: <input type="text" name="phone" /></td>
    <td>State:
      <select name="state">
        <option value="TX">Texas</option>
      </select>
    </td>
  </tr>
</table>

这是在jsfiddle上：

https://jsfiddle.net/ewdypuL8/

问题是名称的输入字段在其自己的行上。我希望它填充 td 的其余部分——而不是所有的 td。

有任何想法吗？

标签： htmlcssgoogle-chrome

Answer 1

只需更改输入的宽度。

<table>
    <tr>
        <td colspan="2">Field 1: <input type="text" name="member_name" style="width: fit-content"/></td>
    </tr>
    <tr>
        <td>Phone: <input type="text" name="phone" /></td>
        <td>State: <select name="state">
                <option value="TX">Texas</option>
            </select></td>
    </tr>
</table>