Question

I have an input form with a column on the left that contains the label for the input, and a column on the right with the input element. Right now it’s a table (sorry):

<tr>
  <td>Header</td>
  <td><input /></td>
</tr>

I have a couple of inputs that I’d like to take following form:

<tr>
  <td>Header (Extra)</td>
  <td><input /> (<input />)</td>
</tr>

In the first case, input should expand to fill the whole column. In the second, I’d like the 2 inputs to expand as wide as they can to be the same size, and fill the column.

Ideally, my display would look like

Row 1         _______________________
Row 2 (Extra) __________ (__________)

Is it possible? Thoughts on converting this to more semantic html would also be entertained. Also note that I’d like all of the “Row 2” line to be on 1 line when possible, it should work with a flexible table width.

Answer 1

I could not find a way to get this to format correctly without putting the parentheses in their own cells.

<table>
    <tr>
      <td>Header</td>
      <td colspan="4"><input /></td>
    </tr>
    <tr>
      <th>Target&nbsp;(Actual)</th>
      <td><input /></td>
      <td>&nbsp;(</td>
      <td><input /></td>
      <td>)</td>
    </tr>
</table>

table {
    width:27em;
}
table input {
    width:99%;
}

When I set the table width to something like 95%, everything resizes nicely with the browser. A bit of padding on cells keeps the parentheses and inputs from overlapping.