1

With the following HTML, the input element's width goes beyond the edge of the table's border. What is the proper way to have the input element take up the entire cell content's but still have the same margin on the right edge as it shows on the left?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
<table style="border: 1px solid #000000;" width="100%">
<tr>
<td><input style="width:100%"/></td>
</tr>
</table>
</body>
</html>
Matt Thalman
  • 273
  • 1
  • 3
  • 5
  • 1
    Huh? It shouldn't do that. Can you show an example (ideally a http://jsfiddle.net)? In what browsers does this happen? – Pekka Feb 28 '11 at 17:40

1 Answers1

1

The reason is that input widths are evaluated without taking into account the default border (and maybe padding, IIRC) of the input itself. Try setting padding: 0px; border: 0px and check it.

Also, see Problem with <input type='text' /> and <textarea> width or How can I make a TextArea 100% width without overflowing when padding is present in CSS? for a solution - this has come up before.

Community
  • 1
  • 1
Ian Pugsley
  • 1,062
  • 8
  • 20