Skip to main content
se eliminaron 3 caracteres en el cuerpo
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30

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 el su contenedor padre tenga unas dimensiones establecidas.

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

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 el su contenedor padre tenga unas dimensiones establecidas.

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

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.

Se aclara el enfoque de la respuesta
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30

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 el su contenedor padre tenga unas dimensiones establecidas.

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

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%;
  
  /* 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.

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

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 el su contenedor padre tenga unas dimensiones establecidas.

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

Se aclara el enfoque de la respuesta
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30

Si bien, las siguientes líneas la copié de tu pregunta, funciona hasta cierto punto:

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

Solo que le faltan unos detalles; establecer la propiedad box-sizing (box-sizing: border-box) y definirla como un elemento de bloque (display: block) a input, colocarle a la celda (td) una dimensión (por ejemplo, height: 30px)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%;
  
  /* El detalle que faltaba que funcione */
  box-sizing: border-box;
  
  /* Además, de colocarla como un elemento de bloque */
  display: block;
}
<table>
  <thead>
    <tr>
      <th>Campo</th>
      <th>Campo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input></td>
      <td><input></td>
  </tbody>
</table>

Sin esa propiedad box-sizing, cualquier borde o relleno hará que tenga un tamaño total de más del 100%.

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

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

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

Si bien, las siguientes líneas la copié de tu pregunta, funciona hasta cierto punto:

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

Solo que le faltan unos detalles; establecer la propiedad box-sizing (box-sizing: border-box) y definirla como un elemento de bloque (display: block) a input, 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%;
  
  /* El detalle que faltaba que funcione */
  box-sizing: border-box;
  
  /* Además, de colocarla como un elemento de bloque */
  display: block;
}
<table>
  <thead>
    <tr>
      <th>Campo</th>
      <th>Campo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input></td>
      <td><input></td>
  </tbody>
</table>

Sin esa propiedad box-sizing, cualquier borde o relleno hará que tenga un tamaño total de más del 100%.

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

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

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%;
  
  /* 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.

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

Se corrige detalles pasados por alto
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30
Loading
Se corrige detalles pasados por alto
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30
Loading
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30
Loading