2

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

introducir la descripción de la imagen aquí

3
  • ¿Por qué no simplemente haces: td > input { width: 50px; }?
    – gugadev
    el 22 jun. 2017 a las 17:09
  • Eso era todo, ¿Lo puedes poner como respuesta para cerrar la pregunta? ¿Y alguna idea porqué no funciona de otra manera? el 22 jun. 2017 a las 18:01
  • He publicado mi respuesta y te he puesto otra opción más «directa».
    – gugadev
    el 22 jun. 2017 a las 18:19

1 respuesta 1

2

En realidad no es un comportamiento extraño, las cajas de texto tienen un ancho predeterminado de acuerdo al navegador; la media es 170 - 175 pixeles.

Puedes hacer dos cosas:

  • Usar para darle un ancho fijo.
  • Usar el atributo size, el cual, en un input de tipo text representará el ancho en caracteres.

CSS

td > input { width: 50px; }
<table>
  <thead>
    <tr>
      <th>Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text"></td>
    </tr>
  </tbody>
</table>

Atributo size

<table>
  <thead>
    <tr>
      <th>Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" size="3"></td>
    </tr>
  </tbody>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.