making text area fill remaining td without spilling over onto a new line

Question

Here's my 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>

Here it is on jsfiddle:

https://jsfiddle.net/ewdypuL8/

The problem is that the input field for the name is on its own line. I want it to fill the rest of the td - not all of the td.

Any ideas?

Does this answer your question? [How to prevent line-break in a column of a table cell (not a single cell)?](https://stackoverflow.com/questions/1893751/how-to-prevent-line-break-in-a-column-of-a-table-cell-not-a-single-cell) — Heretic Monkey, Jun 23 '20 at 20:38
@HereticMonkey - that sorta works. But if I have another column next to the colspan=2 column the input area extends into that other column. eg. the width is unchanged - what's changed is simply the fact that it's not wrapping around anymore. See https://jsfiddle.net/20ng8kcL/ — neubert, Jun 23 '20 at 20:52

Karan Goyal · Answer 1 · 2020-06-23T20:41:53.113

0

Just change width of input.

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

edited Jun 23 '20 at 20:41

answered Jun 23 '20 at 20:31

Karan Goyal

447
5
10

making text area fill remaining td without spilling over onto a new line

1 Answers1