Question

这是我的代码：

<table>
    <tr>
        <td colspan="2" style="white-space: nowrap">Field 1: <input type="text" name="member_name" style="width: 100%"/></td>
        <td colspan="2" style="white-space: nowrap">Field 2: <input type="text" name="member_name2" 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>
        <td>Phone: <input type="text" name="phone2" /></td>
        <td>State: <select name="state2">
                <option value="TX">Texas</option>
            </select></td>
    </tr>
</table>

问题在于，设置为nowrap的空格设置的<td>元素扩展到相邻的<td>中，这可能是由于子{{1}中的width: 100%位}。

关于如何解决此问题的任何想法？

Answer 1

您可以在div内放置一个td。
使用flex对齐元素。
无需使用white-space和width: 100%

.form-control {
  display: flex;
}
.form-control input {
  flex-grow: 1;
}

<table>
    <tr>
        <td colspan="2">
          <div class="form-control">
            <label>Field 1: </label>
            <input type="text" name="member_name"/>
          </div>
        </td>
        <td colspan="2">
          <div class="form-control">
            <label>Field 2: </label>
            <input type="text" name="member_name"/>
          </div>
        </td>
    </tr>
    <tr>
        <td>Phone: <input type="text" name="phone" /></td>
        <td>State: <select name="state">
                <option value="TX">Texas</option>
            </select></td>
        <td>Phone: <input type="text" name="phone2" /></td>
        <td>State: <select name="state2">
                <option value="TX">Texas</option>
            </select></td>
    </tr>
</table>

宽度：100％和空格：nowrap导致输入元素超过父元素的宽度

1 个答案: