Skip to main content
1 de 6
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 falta un detalle, la propiedad box-sizing:

table {
  width: 100%;
}

td {
  padding: 0;
}

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>

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

David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30