1

Tengo una tabla HTML:

<style>
  td {
    padding: 0;
  }
  
  input {
    width: 100%;
    height: 100%;
  }
</style>

<table>
  <thead>
    <tr>
      <th>Campo</th>
      <th>Campo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input></td>
      <td><input></td>
  </tbody>
</table>

Quiero hacer algo parecido a Excel, es decir que mi input ocupe todo el 100% de mi celda, pero solo logro ocupar el width pero no el height

2
  • El código que expones parece funcionar, ¿podrías explicar mejor por favor?
    – user128299
    el 14 abr. 2021 a las 22:33
  • El código parece funcionar, pero realmente lo hace hasta cierto punto. Lo que debes es establecerle unas dimensiones a la celda (td) para que adopte la altura que se pretende. Sin embargo, si lo quiere hacer sin darle dimensiones a la celda, entonces, debería prescindir de % en el input, ya que su contenedor no tiene dimensiones. Me refiero, específicamente al valor 100% de la propiedad height. el 14 abr. 2021 a las 23:34

1 respuesta 1

2

Solo faltan algunos detalles para que funcione:

  1. Al elemento input debes establecerle la propiedad box-sizing (box-sizing: border-box) para que su tamaño total no sea mayor al que se pretende en caso de existir bordes y/o rellenos.

  2. Colocarle a la celda (td) una dimensión (por ejemplo, height: 30px):

table {
  width: 100%;
}

td {
  padding: 0;
  
  /* Por ejemplo, agregar una altura
     en la celda */
  height: 30px;
}

input {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0 10px;
  
  /* El detalle que faltaba que funcione */
  box-sizing: border-box;
}
<table>
  <thead>
    <tr>
      <th>Campo</th>
      <th>Campo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input></td>
      <td><input></td>
  </tbody>
</table>

Para que cualquier elemento pueda tomar dimensiones definidas en una regla CSS debe ser de bloque, independientemente del tipo de bloque que sea.

También tome en cuenta que si no quiere establecerle una altura a la celda (td), sino, directamente a input, entonces, debería prescindir de %, a menos, que su contenedor padre tenga unas dimensiones establecidas.

Si quiere saber más, puede consultar Modelo de caja en el sitio Web oficial de Mozilla.

1
  • 1
    gracias amigo el codigo funciono
    – IntruzO
    el 15 abr. 2021 a las 4:20

Tu Respuesta

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

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