Solo faltan algunos detalles para que funcione:
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.
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.
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 elinput
, ya que su contenedor no tiene dimensiones. Me refiero, específicamente al valor100%
de la propiedadheight
.