How to stretch input field to full width?

Question

I have a simple HTML form. I'd like the right widgets in the second column (text field, combox, and so on) to stretch and fill the full column.

My HTML looks like this:

<table class="formTable">
  <tr>
    <td class="col1">Report Number</td>
    <td class="col2"><input type="text"/></td>
  </tr>
  <tr>
    <td class="col1">Report Type</td>
    <td class="col2"><select></select></td>
  </tr>
</table>

My CSS looks like this:

.formTable {
  border-color: black;
}

.formTable td {
  padding: 10px;
}

.formTable .col1 {
  text-align: right;
}

.formTable .col2 {
  width: 100%;
}

Any ideas?

Answer 1

You can specify that all of the children of class "col2" have a width of 100% by adding the following:

.col2 * { width:100%;}

See my dabblet example: http://dabblet.com/gist/2227353