¿Cómo estirar el campo de entrada al ancho completo?

Tengo un formulario HTML simple. Me gustaría que los widgets correctos en la segunda columna (campo de texto, combox, etc.) se estiren y llenen la columna completa.

Mi HTML se ve así:

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

Mi CSS se ve así:

.formTable {
  border-color: black;
}

.formTable td {
  padding: 10px;
}

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

.formTable .col2 {
  width: 100%;
}

¿Algunas ideas?

Puede especificar que todos los hijos de la clase “col2” tengan un ancho del 100 % agregando lo siguiente:

.col2 * { width:100%;}

Vea mi ejemplo de dabblet: http://dabblet.com/gist/2227353

Comience con el marcado semántico ya que no se trata de datos tabulares. Además, con las etiquetas añadidas, no necesitamos DIV de envoltura adicionales, lo que es más limpio.

<ul class="formList">
    <li>
        <label for="input_1">
            Report Number
        </label>
        <input id="input_1" name="input_1" type="text" />
    </li>
    <li>
        <label for="input_2">
            Report Type
        </label>
        <select id="input_2" name="input_2"></select>
    </li>
</ul>

Luego agrega el CSS:

.formList {
    border:1px solid #000;
    padding:10px;
    margin:10px;
}
label {
    width:200px;
    margin-left:-200px;
    float:left;
}
input, select {
    width:100%;
}
li {
    padding-left:200px;
}

Ejemplo de violín JS: http://jsfiddle.net/6EyGK/

Puedes usar:

.col2 * {
    width: 100%;
}

Para combinar con cualquier .col2 descendiente. como puedes ver aquí. O:

.col2 > * {
    width: 100%;
}

Para hacer coincidir solo los hijos inmediatos.

si usa twitter Oreja: y la entrada está dentro de una columna

solo agrega a <input> la class="container-fluid"

Nota

Esta no es una respuesta, sino un comentario, que incluye demasiado código para entrar en la sección de comentarios. Así que, por favor, abstente de votarme negativamente, ¿quieres? 🙂

Otro marcado semántico además de la respuesta de Matthew Darnells:

Si envuelve las etiquetas alrededor de las entradas y selecciones, puede evitar usar el fory id atributos

<ul class="formList">
    <li>
        <label>
            Report Number
        <input name="input_1" type="text" />
        </label>
    </li>
    <li>
        <label>
            Report Type
        <select name="input_2"></select>
        </label>
    </li>
</ul>

O use una lista de definiciones que podría darle un control adicional

<dl class="formList">
    <dt>
        <label for="input_1">
            Report Number
        </label>
    </dt>
    <dd>
        <input id="input_1" name="input_1" type="text" />
    </dd>
    <dt>
        <label for="input_2">
            Report Type
        </label>
    </dt>
    <dd>
        <select id="input_2" name="input_2"></select>
    </dt>
</dl>