Setting TEXTAREA and INPUT fields to 100% width inside TD truncates right margin

Question

Please help me fix this issue. I would like to set the width of INPUT and TEXTAREA elements to 100% so that they entirely fit the table cell but I noticed that the right border is truncated.

I tried to wrap the INPUT inside a DIV and set 'overflow' to 'hidden' as I read on other answers but it does not work:

<div style="overflow:hidden">

    <input class="input_field" type="text" />

</div>

I also set margins and paddings, and width=95% too but the right border is always truncated even if it is well inside the TD.

Please see the HTML and CSS code at jsFiddle. Look carefully to the right border of the elements, you will see they are truncated. Set 'table border=0' to see better.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Use box-sizing: border-box (and the corresponding browser-specific versions):

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

See http://jsfiddle.net/trwut/4/

Related reading: http://paulirish.com/2012/box-sizing-border-box-ftw/

Setting TEXTAREA and INPUT fields to 100% width inside TD truncates right margin

Sign up