Me he encontrado con el siguiente problema:
He creado una tabla en html5
<table width="100%" id="tablaSeleccionados" align="center">
<thead>
<tr>
<th rowspan="2">RUT</th>
<th rowspan="2">NOMBRE</th>
<th colspan="11">NOTAS</th>
<th colspan="4">NOTAS HABILIDADES BLANDAS</th>
<th rowspan="2">APROBADO</th>
</tr>
<tr>
<th width="5px">N1</th>
<th>N2</th>
<th>N3</th>
<th>N4</th>
<th>N5</th>
<th>N6</th>
<th>N7</th>
<th>N8</th>
<th>N9</th>
<th>N10</th>
<th>PROM</th>
<th>N1</th>
<th>N2</th>
<th>N3</th>
<th>PROM</th>
</tr>
</thead>
<tfoot>
<tr>
<th>RUT</th>
<th>NOMBRE</th>
<th>N1</th>
<th>N2</th>
<th>N3</th>
<th>N4</th>
<th>N5</th>
<th>N6</th>
<th>N7</th>
<th>N8</th>
<th>N9</th>
<th>N10</th>
<th>PROM</th>
<th>N1</th>
<th>N2</th>
<th>N3</th>
<th>PROM</th>
<th>APROBADO</th>
</tr>
</tfoot>
<tbody id="tablaSeleccionadosBody">
</tbody>
</table>
Cuando se muestra tal cual está creada no tiene ningún problema, sin embargo luego debo llenarla dinámicamente con jquery y en las columnas de notas deben ir inputs para que el usuario pueda ingresar notas, estos aparecen pero con un ancho estándar, yo no necesito más que un input donde quepan tres caracteres ya que un ancho estándar hace que la tabla sea tan ancha que sale de la pantalla, he probado dándole width y size al input sin ningún resultado, ¿alguien sabe a que se debe y cómo modificar el ancho del input?
$.each( response.data.seleccionado, function( indice , valor ) {
table += '<tr>';
table += '<td>' + valor['id_seleccionado'] + '</td>';
table += '<td>' + valor['nombre'] + '</td>';
table += '<td><input type="number" id="' + valor['id_seleccionado'] + '-n1" name="' + valor['id_seleccionado'] + '-n1" value="' + valor['N1'] + '"></td>';
table += '<td><input type="number" id="' + valor['id_seleccionado'] + '-n2" name="' + valor['id_seleccionado'] + '-n1" value="' + valor['N2'] + '"></td>';
table += '<td><input type="number" id="' + valor['id_seleccionado'] + '-n3" name="' + valor['id_seleccionado'] + '-n1" value="' + valor['N3'] + '"></td>';
table += '<td><input type="number" id="' + valor['id_seleccionado'] + '-n4" name="' + valor['id_seleccionado'] + '-n1" value="' + valor['N4'] + '"></td>';
table += '<td><input type="number" id="' + valor['id_seleccionado'] + '-n5" name="' + valor['id_seleccionado'] + '-n1" value="' + valor['N5'] + '"></td>';
table += '<td><input type="number" id="' + valor['id_seleccionado'] + '-n6" name="' + valor['id_seleccionado'] + '-n1" value="' + valor['N6'] + '"></td>';
table += '<td><input type="number" id="' + valor['id_seleccionado'] + '-n7" name="' + valor['id_seleccionado'] + '-n1" value="' + valor['N7'] + '"></td>';
table += '<td><input type="number" id="' + valor['id_seleccionado'] + '-n8" name="' + valor['id_seleccionado'] + '-n1" value="' + valor['N8'] + '"></td>';
table += '<td><input type="number" id="' + valor['id_seleccionado'] + '-n9" name="' + valor['id_seleccionado'] + '-n1" value="' + valor['N9'] + '"></td>';
table += '<td><input type="number" id="' + valor['id_seleccionado'] + '-n10" name="' + valor['id_seleccionado'] + '-n1" value="' + valor['N10'] + '"></td>';
table += '<td><b>' + valor['promedio'] + '</b></td>';//PROMEDIO NOTAS
table += '<td><input type="number" id="' + valor['id_seleccionado'] + '-nhb1" name="' + valor['id_seleccionado'] + '-nhb1" value="' + valor['NBH1'] + '"></td>';
table += '<td><input type="number" id="' + valor['id_seleccionado'] + '-nhb2" name="' + valor['id_seleccionado'] + '-nhb2" value="' + valor['NBH2'] + '"></td>';
table += '<td><input type="number" id="' + valor['id_seleccionado'] + '-nhb3" name="' + valor['id_seleccionado'] + '-nhb3" value="' + valor['NBH3'] + '"></td>';
table += '<td><b>' + valor['promedioHB'] + '</b></td>';//PROMEDIO NOTAS HB
if ( valor['aprobado'] == '0' ) {
table += '<td>' + '<center><span class="glyphicon glyphicon-remove eliminar"></span></center>;' + '</td>';
} else {
table += '<td>' + '<center><span class="glyphicon glyphicon-ok agregar"></span></center>' + '</td>';
}
table += '</tr>';
});
$('#tablaSeleccionadosBody').html( table );
td > input { width: 50px; }
?