CODEWITHSUNDEEP
htmlcssgoogle-chrome
neubert
neubert

Reputation: 16792

width: 100% and white-space: nowrap results in input elements going over width of parent element

Here's my code:

<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>

The problem is that the <td> elements with white-space set to nowrap extend into the neighboring <td>'s, presumably because of the width: 100% bit in the child <input>.

Any ideas as to how I can fix this?

Upvotes: 0

Views: 656

Answers (1)

Zuber
Zuber

Reputation: 3473

  • You can place a div inside td.
  • use flex to align the elements.
  • No need of using white-space and 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>

Upvotes: 2

Related Questions