Solo faltan algunos detalles para que funcione:
Al elemento
input
debes establecerle la propiedadbox-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 ainput
, 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.