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

Question

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

Mi HTML se parece a esto:

<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%; 
} 

¿Alguna idea?

Answer 1

Puede especificar que todos los hijos de la clase "col2" tener una anchura de 100% añadiendo lo siguiente:

.col2 * { width:100%;} 

Ver mi ejemplo dabblet: http://dabblet.com/gist/2227353

Answer 2

Se puede utilizar:

.col2 * { 
    width: 100%; 
} 

para adaptarse a cualquier descendiente .col2. como puedes ver here. O bien:

.col2 > * { 
    width: 100%; 
} 

Para que coincida solo con los elementos secundarios.

Answer 3

de inicio con el marcado semántico desde esto no es datos tabulares. Además, con las etiquetas añadidas, no necesitamos DIV adicionales de envoltura, 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> 

A continuación, añadir 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; 
} 

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

Answer 4

Otras marcas semánticas adicionalmente a la respuesta Mateo Darnell:

Si envuelve las etiquetas alrededor de las entradas y selecciona, puede evitar el uso de los atributos for y id.

<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 utilizar una lista de definiciones que podrían dar 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> 

Answer 5

si el uso de Twitter Bootstrap: y la entrada está dentro de una columna

acaba de añadir a <input> la class="container-fluid"